2

Twitter Bootstrap を使用してサイトのナビゲーション バーを作成しています。私は通常、複数のメニュー項目を持つメニューを作成するためにドロップダウン プラグインを使用します。ただし、意図的に閉じたくないメニュー (検索ボックス[1]など) については、collapse プラグインを使用して折りたたみ可能なメニューを作成します。

参考までに、ナビゲーション バーのマークアップのスケルトンを次に示します。

<nav class="navbar navbar-default navbar-static-top">
    <div class="navbar-header">
        <a class="navbar-brand" href="/">...</a>
    </div>

    <div class="collapse navbar-collapse">

        <!-- Dropdown Menu -->
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="/categories/" class="dropdown-toggle" data-toggle="dropdown">Categories</a>
                <ul class="dropdown-menu">
                    <li><a href="/tech/">Tech</a></li>
                    <li><a href="/autos/">Autos</a></li>
                    <li><a href="/travel/">Travel</a></li>
                </ul>
            </li>
        </ul>

        <!-- Collapsible Menu -->
        <ul class="nav navbar-nav navbar-right">
            <li id="nav-search" class="collapsible-menu">
                <a data-toggle="collapse" data-target="#nav-searchform" class="collapsed" href="#">Search</a>
                <div id="nav-searchform" class="collapse">
                    <!-- Search Form -->
                </div>
            </li>
        </ul>

    </div>
</nav>

<!-- Dropdown Menu -->上記のコード内のコメントとに注意してください<!-- Collapsible Menu -->。これらは、それぞれドロップダウン メニューと折りたたみ可能なメニューを示しています。

問題:折りたたみ可能なメニュー (メニューを再度クリックしないと閉じない) が開いている場合、ユーザーがドロップダウン メニューの 1 つをクリックすると、両方のメニューが開きます。ドロップダウン メニューを開いたときに、折りたたみ可能なメニューが自動的に閉じられるようにします。

どうすれば（jQueryで）できますか？

私はこれらを試しましたが、どれもうまくいかないようです:

jQuery(document).ready(function($){

    $('.dropdown-toggle').click(function() {
        $(this).closest('#nav-search').toggleClass('selected');
    });

});

と

jQuery(document).ready(function($){

    $('.dropdown-toggle').on('show.bs.dropdown', function () {
        $(this).closest('#nav-search').children().toggleClass('in');
    });

});

と

jQuery(document).ready(function($){

    $('.dropdown-toggle').on('show.bs.dropdown', function () {
        $(this).closest('#nav-search').children().removeClass('in');
    });

});

何が間違っているのかわかりません。

脚注:

  1. 検索ボックスにも Bootstrap のドロップダウン プラグインを使用すると、ユーザーが入力/テキスト領域をクリックするとドロップダウンが閉じてしまうため、Collapse プラグインを使用することにしました。
4

1 に答える 1

2 
$('.dropdown').click(function(){
      if($('#nav-searchform').hasClass('in'))
        $('#nav-searchform').collapse('hide');
});

http://www.bootply.com/122096

于 2013-10-31T21:24:33.600 に答える