javascript - bootstrap drop down menu doesn't open -
i having trouble getting dropdown's work. can navbar show perfectly, when click on "dropdown" (either of them) not display dropdown menu. have tried looking on other posts this, nothing fixed everyone's problems helped. here code
<head> <meta charset="utf-8"> <title>landing page</title> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <script type="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script> <script type="javascript" src="dist/js/bootstrap.js"></script> <script type="javascript"> $(document).ready(function() { $(".dropdown-toggle").dropdown(); }); </script> <link href="dist/css/bootstrap.css" rel="stylesheet"> <link href="styles.css" rel="stylesheet"> </head> <body> <div class="navbar-wrapper"><!-- navbar start --> <div class="container"> <nav class="navbar navbar-inverse navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a> </li> <li><a href="#about">about</a> </li> <li><a href="#about">contact</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li role="separator" class="divider"></li> <li class="dropdown-header">nav header</li> <li><a href="#">separated link</a></li> <li><a href="#">one more separated link</a></li> </ul> </li> </ul> </div> </div> </nav> </div> </div><!-- navbar end --> <!-- placed @ end of document pages load faster --> </body>
i work:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>landing page</title> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link href="css/bootstrap.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-default navbar-inverse navbar-static-top"> <div class="container-fluid"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">project name</a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a> </li> <li><a href="#about">about</a> </li> <li><a href="#about">contact</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">one more separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!-- placed @ end of document pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> i used code http://getbootstrap.com/components/#navbar.
and error jquery version used link getbootstrap.com
Comments
Post a Comment