twitter-bootstrap 如何使 Bootstrap 下拉菜单在单击按钮时向下滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16886101/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Bootstrap drop down menu slide down on button click
提问by Titus Shoats
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
我正在使用 Bootstrap，我试图在单击按钮时在下拉菜单上声明一个事件。由于某些奇怪的原因，jquery 事件没有触发。下拉菜单应该在搜索查询元素的正下方下拉。我的 JS 小提琴是http://jsfiddle.net/sean3200/fNrZ3/...任何帮助将不胜感激..Thankszz！下面是部分代码
<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();
})
})
采纳答案by thomallen
As Eliran Efron said, change JS line 3 to:
正如 Eliran Efron 所说，将 JS 第 3 行更改为：
$("#drop").slideDown();
Change HTML line 25-26 to:
将 HTML 第 25-26 行更改为：
<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.
您使用 JS 引用了错误的元素，仅此而已。
Here is your example modified and working: http://jsfiddle.net/fNrZ3/4/
这是您修改和工作的示例：http: //jsfiddle.net/fNrZ3/4/
回答by Eliran Efron
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).
首先：该函数被命名.slideDown()为大写 d 那里可以做出一个巨大的改变......（不管是否工作，不要忘记它是一个你正在调用的函数）。
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.
从我在 chrome 的 JS 控制台上看到的内容来看，我得到了错误：Uncaught TypeError: Object [object Object] has no method 'slidedown'所以它肯定与名称有关，因此将其更改为大写字母 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
从那里我想它主要是设计的一些设置......你可以尝试在演示中查看这里并使用其中的一些： .slideDown() jQuery API
回答by Kabra4
$(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();
});
