How to make Bootstrap drop down menu slide down on button click
Solution 1
As Eliran Efron said, change JS line 3 to:
$("#drop").slideDown();
Change HTML line 25-26 to:
<div class="dropdown">
<ul id="drop" class="dropdown-menu" role="menu" aria-labelledby="dLabel">
You were referencing the wrong element with your JS, thats all.
Here is your example modified and working: http://jsfiddle.net/fNrZ3/4/
Solution 2
First: the function is named .slideDown()
the capital d there can make a hugh change... (working or not, don't forget it's a function you are calling).
from what i saw on the JS console in chrome, i get the error: Uncaught TypeError: Object [object Object] has no method 'slidedown'
so it is definitely got something to do with the name so change it to the one with the capital D.
from there i guess it's mostly some settings for the design... you can try looking here in the Demos and use some of it: .slideDown() jQuery API
Solution 3
$(document).ready(function($){
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
$(".btn-group").click(function(){
if($(this).hasClass('open')){
$(".dropdown-menu").slideUp();
}else{
$(".dropdown-menu").slideDown();
}
});
});
$(document).on('click.dropdown.data-api', function(){
$(".dropdown-menu").slideUp();
});
T Shoats
I'm a C++Developer, who specializes In Software Development. An inspiring entrepreneur, and an avid reader, living in Rochester Ny. I specialize in using the latest c++ design and development technologies.
Updated on June 04, 2022Comments
-
T Shoats almost 2 years
im using Bootstrap and I'm trying to declare an event on the drop down menu when a button is clicked. For some odd reason the jquery event isnt triggering. The drop down menu should drop down right under the search query element. My JS Fiddle is http://jsfiddle.net/sean3200/fNrZ3/ ...Any help would be appreciated.. Thankszz!! Below is some of the code
<div class="container"> <div class="navbar"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">Forbes Clientel</a> <div class="nav-collapse collapse"> <ul class="nav"> <li> <a href="#" class="active">Home</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div> <form class="navbar-search"> <input class="search-query" placeholder="Search..." type="text"> <div id="drop" class="dropdown"> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li> <a tabindex="-1" href="#">Action</a> </li> <li> <a tabindex="-1" href="#">Another action</a> </li> <li> <a tabindex="-1" href="#">Something else here</a> </li> <li class="divider"></li> <li> <a tabindex="-1" href="#">Separated link</a> </li> </ul> </div> </form> </div> </div> </div> <div class="container"> <div class="hero-unit"> <h1>Forbes Clientel</h1> <p>FC is a directory of the top forbes earning entrepreneurs</p> <input id="myBtn" class="btn btn-primary btn-large" value="Search" type="button"> </div> </div> </div> //script $(document).ready(function(){ $("#myBtn").click(function(){ $("#drop").slidedown(); }) })