Bootstrap 下拉菜单 - 单击时关闭答案

【问题标题】：Bootstrap dropdown-toggle close on clickBootstrap 下拉菜单 - 单击时关闭
【发布时间】：2015-08-20 07:29:28
【问题描述】：

我有一个下拉按钮，其中包含锚定到页面不同部分的内容列表。此下拉菜单仅适用于移动设备。

但是问题是，我单击下拉菜单后不会关闭它。无论如何我可以让它在点击时关闭吗？我试过环顾四周，但它对我的不起作用。

<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>

我也看了一下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)
  }

这就是它不会关闭的原因吗？有什么解决方法可以让它工作吗？

编辑：

所以在一些帮助下我得到了这个脚本：

$('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;
      });
  });

我的 javascript 很弱，我如何实际编辑它以使其仅在我的“mobile-dropdown”id div 中工作。

到目前为止，我已经将我的脚本更新为：

$('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;
  });
});

它就像我想要的那样工作。但第一次后下拉菜单不会再次打开。

【问题讨论】：

看这个evanp的帖子可能对你有帮助gist.github.com/evanp/6456479
不错！谢谢它的作品！但它正在影响我的导航栏的下拉菜单。有没有办法只为这个下拉按钮指定小脚本？
尝试用 css 修复。
我确实尝试添加一个新的类名，因为更改下拉切换名称会影响下拉菜单。但整个事情不再起作用了

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

这应该使它适用于您的 HTML：

$('document').ready(function() {
    $("#mobile-dropdown .dropdown-toggle").click(function() {
        $(this).dropdown("toggle");
        return false;
    });
});

更新

这是一个包含平滑滚动功能的工作示例：

$(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;
            }
        }
    });
});

注意到第三行了吗？这就是它所需要的：$(this).dropdown("toggle");。

您可以在 JSFiddle 上查看working example。

【讨论】：

我刚刚在我的代码上尝试过，但它不起作用。而不是在单击时关闭下拉菜单，而是在关闭后无法单击下拉菜单以再次打开它。
@flolaloop 您拥有的代码应该可以工作。即使没有您添加的 JavaScript，它也应该可以工作。看看this。请注意我是如何关闭 JavaScript 的。我想知道您是否还有其他导致此问题的 JavaScript。就这些了吗？
好的，发现什么阻碍了它，现在它可以工作了。但现在我的平滑滚动脚本不起作用。我觉得这比实际上更复杂:'(
@flolaloop 那么，是什么阻止了它？你能把它添加到 jsfiddle 页面，更新它并发布链接吗？
我认为这是我的平滑滚动效果脚本。这是更新的 jsfiddle jsfiddle.net/wkquggy3/16

【解决方案2】：

可以在这里找到一个好的解决方案：

https://github.com/CWSpear/bootstrap-hover-dropdown

添加class="dropdown-toggle disabled"

这里解释得更好Allow click on twitter bootstrap dropdown toggle link?

【讨论】：