twitter-bootstrap Bootstrap 下拉菜单切换关闭点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29963040/
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
Bootstrap dropdown-toggle close on click
提问by flolaloop
I have a dropdown button with a list of things that are anchored to different parts of the page. This dropdown is only for mobile.
我有一个下拉按钮，其中列出了锚定到页面不同部分的内容。此下拉菜单仅适用于移动设备。
However the problem is, the dropdown would not close after I click on it. Is there anyway I can make it close on click? I've tried looking around but it wouldn't work on mine.
但是问题是，单击下拉菜单后不会关闭。无论如何我可以点击关闭它吗？我试过环顾四周，但它对我的不起作用。
<div id="mobile-dropdown" class="nav2 w" data-spy="affix" data-offset-top="350">
<div class="container">
<div class="pull-left" style="margin-top:3px; margin-right:3px;">Jump to </div>
<div class="pull-left">
<div class="btn-group mob-fl">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Categories
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#1">One</a></li>
<li><a href="#2">Two</a></li>
<li><a href="#3">Three</a></li>
<li><a href="#4">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
I also took a look at bootstrap's js itself and caught this line:
我还查看了 bootstrap 的 js 本身并发现了这一行：
if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
// if mobile we use a backdrop because click events don't delegate
$('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
}
Is this be the reason why it won't close? Are there any workaround to make it work?
这就是它不会关闭的原因吗？有什么解决方法可以使它工作吗？
EDIT:
编辑：
So with some help i got this script:
所以在一些帮助下我得到了这个脚本：
$('document').ready(function() {
$("a.dropdown-toggle").click(function(ev) {
$("a.dropdown-toggle").dropdown("toggle");
return false;
});
$("ul.dropdown-menu a").click(function(ev) {
$("a.dropdown-toggle").dropdown("toggle");
return false;
});
});
My javascript is pretty weak, how do i actually edit this to make it work only in my "mobile-dropdown" id div.
我的 javascript 非常弱，我如何实际编辑它以使其仅在我的“移动下拉”id div 中工作。
Alright so far I've updated my script to this:
好的，到目前为止，我已将脚本更新为：
$('document').ready(function() {
$("#subject_cat_mob .dropdown-toggle").click(function(ev) {
$("#subject_cat_mob .dropdown-toggle").dropdown("toggle");
return false;
});
$("#subject_cat_mob ul.dropdown-menu a").click(function(ev) {
$("#subject_cat_mob .dropdown-toggle").dropdown("toggle");
return false;
});
});
It works like how I want it to be. But the dropdown won't open again after the first time.
它就像我想要的那样工作。但是下拉菜单不会在第一次后再次打开。
采纳答案by Kevin
This should make it work for your HTML:
这应该使它适用于您的 HTML：
$('document').ready(function() {
$("#mobile-dropdown .dropdown-toggle").click(function() {
$(this).dropdown("toggle");
return false;
});
});
Update
更新
Here's a working example including your smooth scroll functionality:
这是一个工作示例，包括您的平滑滚动功能：
$(function() {
$('a[href*=#]:not([href=#])[href^="#"]:not([data-toggle])').click(function() {
$(this).dropdown("toggle"); // this is the important part!
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top-100
}, 1000);
return false;
}
}
});
});
Notice the third line? That's all it needs: $(this).dropdown("toggle");.
注意到第三行了吗？这就是它所需要的：$(this).dropdown("toggle");。
You can check out a working exampleon JSFiddle.
您可以在 JSFiddle 上查看一个工作示例。
回答by Christian Stenger Palma
A good solution can be found here:
一个很好的解决方案可以在这里找到：
https://github.com/CWSpear/bootstrap-hover-dropdown
https://github.com/CWSpear/bootstrap-hover-dropdown
Add class="dropdown-toggle disabled"
添加 class="dropdown-toggle disabled"
It's better explained here Allow click on twitter bootstrap dropdown toggle link?
在这里更好地解释允许点击 twitter bootstrap 下拉切换链接？
