Menu
I'm trying to get to grips with bootstrap and having little success. I am just trying to get a local version of this template working
http://getbootstrap.com/examples/jumbotron/
I have copied the html directly into a html page and referenced the css and js files in the same order as the webpage only using copies from the latest download on my machine. However nothing happens when the arrow next to dropdown is clicked (i.e. no menu appears)
I have tried to reproduce the code in a jsfiddle but that is even worse and doesnt display the menu properly at all. http://jsfiddle.net/andieje/kRX6n/
Here is my page's output. I also included the dropdown js too
<!DOCTYPE html> <html> <head><title> Untitled Page </title><link href="styles/bootstrap.css" rel="stylesheet" /> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="JavaScript/html5shiv.js"></script> <script src="JavaScript/respond.min.js"></script> <![endif]--> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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 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="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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 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> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" placeholder="Email" class="form-control"> </div> <div class="form-group"> <input type="password" placeholder="Password" class="form-control"> </div> <button type="submit" class="btn btn-success">Sign in</button> </form> </div><!--/.navbar-collapse --> </div> </div> <script type="text/javascript" src="JavaScript/jquery.js" /> <script type="text/javascript" src="JavaScript/bootstrap-min.js" /> <script type="text/javascript" src="JavaScript/bootstrap-dropdown.js" /> </body> </html> I also tried adding this code but to no avail
<script type="text/javascript"> $(document).ready(function () { $('.dropdown-toggle').dropdown(); }); </script> 
938
Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.
In your case you have overflow:hidden on . row which holds the menu and therefore the dropdown menu will never show because it overflows the container. For the element called . row that holds the menu you will need to use another clearing mechanism instead of overflow:hidden.
Answer: Use the jQuery on() method You can use the jQuery click() method in combination with the on() method to hide the dropdown menu when the user click outside of the trigger element.
To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.
i faced the same problem , the solution worked for me , hope it will work for you too.
<script src="content/js/jquery.min.js"></script> <script src="content/js/bootstrap.min.js"></script> <script> $(document).ready(function () { $('.dropdown-toggle').dropdown(); }); </script> Please include the "jquery.min.js" file before "bootstrap.min.js" file, if you shuffle the order it will not work.
164
Just Remove the type="text/javascript"
<script src="JavaScript/jquery.js" /> <script src="JavaScript/bootstrap-min.js" /> Here is the update - http://jsfiddle.net/andieje/kRX6n/
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
