Bootstrap下拉菜单切换在点击后关闭

Question

Bootstrap下拉菜单切换在点击后关闭

6

我有一个下拉按钮，其中列出了与页面不同部分关联的各种内容。该下拉列表仅适用于手机。

然而，问题是，当我单击它后，下拉列表不会关闭。有没有办法使其在单击后关闭？我尝试过寻找解决方法，但无法在我的设备上生效。

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

它的效果和我想要的一样。但是下拉框在第一次使用后就无法再次打开。

- flolaloop

请查看Evanp的这篇帖子，它可能会对你有所帮助：https://gist.github.com/evanp/6456479 - Suchit kumar

不错！谢谢，它起作用了！但是它影响了我的导航栏下拉菜单。我能不能只让这个小脚本针对这个下拉按钮？ - flolaloop

尝试使用 CSS 进行修复。 - Suchit kumar

我尝试添加一个新的类名，因为更改dropdown-toggle名称会影响下拉菜单，但整个东西都无法工作了。 - flolaloop

2个回答

1

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

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

添加 class="dropdown-toggle disabled"

这里有更好的解释如何允许在 Twitter Bootstrap 下拉菜单中点击链接？

- Christian Stenger Palma

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kevin · Accepted Answer

这应该可以让你的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上查看一个工作示例。