twitter-bootstrap - Sammy の使用時に Bootstrap ドロップダウン メニューが閉じない

Question

まず、アプリケーションで Bootstrap と Sammy.js を使用しています。ドロップダウン メニュー (ドロップダウン ボタンの) のいくつかのアンカーを、それぞれ #/login と #/register に移動するように構成しました。問題は、[ログイン/登録] リンクをクリックしても、ドロップダウン メニューが閉じないことです。

Firefox で実行中に撮ったスクリーンショットも添付しました。

ここで何が間違っていますか？

ありがとうございました。

Answer 1

私が最終的に使用した解決策は、これらのクリックを手動で処理することです。以下はそれを行うコードです。

$('#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

私にはうまくいきませんでしたが、解決策を見つけるのに役立ちました。

ドロップダウン メニューの上部のソリューションをクリックしてから、同じドロップダウンにない別のメニュー項目をクリックすると、再び閉じませんでした。だから私は開いているものをすべて閉じるためにサミールートに挿入しました：

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>