twitter-bootstrap - 使用 Sammy 时，Bootstrap 下拉菜单未关闭

Question

首先，我在我的应用程序中使用 Bootstrap 和 Sammy.js。我在下拉菜单（下拉按钮）中配置了一些锚点，分别导航到 #/login 和 #/register。问题是当我点击登录/注册链接时，下拉菜单没有关闭。

我还附上了在 Firefox 中运行时截取的屏幕截图。

我在这里做错了什么？

谢谢你。

Answer 1

我最终使用的解决方案是手动处理这些点击。Bellow 是执行此操作的代码。

$('#header').delegate('a[href="#login"],a[href="#register"]', 'click', function() {
    sammy.setLocation($(this).attr('href'));
    $(this).closest('.dropdown-menu').trigger('click');
    return false;
});

其中： sammy 是通过 Sammy(...) 获得的实例

Answer 2

它对我不起作用，但它帮助我找到了解决方案。

当您单击下拉菜单上的上部解决方案，然后单击不在同一下拉菜单中的另一个菜单项时，它不会再次关闭。所以我插入了 sammy 路线来关闭所有打开的路线：

this.get('#/', function() {
  $(".navbar-nav .dropdown").removeClass("open");
  $('#main').load('home.html');
});

在这里看小提琴：http: //jsfiddle.net/ehs70rLL/

我玩了一下，也尝试了我的第一个片段:)

;(function($) {
  var app = $.sammy(function() {

    this.get('#/:page', function() {
      var jmnu = $( 'a[href="#/' + this.params['page'] + '"]' );
      $(".navbar .dropdown").removeClass("open");  //close all open Dropdowns
      $('.navbar li').removeClass('active');
      $(jmnu).parent().addClass('active');
      $(jmnu).parents('li').addClass('active');
      $('#mainpage').html('<span>>> ' + this.params['page'] + '</span>');
    });

  });
  $(function() {
    app.run('#/One')
  });
})(jQuery);

/* No own CS is needed at all for functionality */
#mainpage { 
  padding-left: 60px; 
  font-size: 120%;
}

/* Non-responsive overrides, not needed for anything than snippet-preview in small window */
.navbar-header {
  float: left;
}
.navbar-collapse {
  display: block !important;
  height: auto !important;
  padding-bottom: 0;
  overflow: visible !important;
  visibility: visible !important;
}
.navbar-collapse {
  border-top: 0;
}
.navbar-nav {
  float: left;
  margin: 0;
}
.navbar-nav > li {
  float: left;
}
.navbar-nav > li > a {
  padding: 15px;
}
.navbar .navbar-nav .open .dropdown-menu {
  position: absolute;
  float: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-width: 0 1px 1px;
  border-radius: 0 0 4px 4px;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
  color: #333;
}
.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar .navbar-nav .open .dropdown-menu > .active > a,
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #fff !important;
  background-color: #428bca !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://raw.githubusercontent.com/quirkey/sammy/master/lib/min/sammy-latest.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<section id="navi">
  <!-- Navbar -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#/One">One</a></li>
          <li><a href="#/Two">Two</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Three<span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#/Three-A">A</a></li>
              <li><a href="#/Three-B">B</a></li>
              <li><a href="#/Three-C">C</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Four<span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#/Four-A">A</a></li>
              <li><a href="#/Four-B">B</a></li>
              <li><a href="#/Four-C">C</a></li>
            </ul>
          </li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>
</section>


<section id="mainpage"></section>