4

TwitterBootstrapを使用しています。モバイルで表示したときにドロップダウンに折りたたまれる2つ（またはそれ以上）のナビゲーションが必要です。

これは1ページで1回簡単に実行できますが、複数のレスポンシブ/折りたたみ可能なナビゲーションを作成する方法がわかりません。

このコードは、モバイルで折りたたまれる1つのナビゲーションを作成するために機能します。

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">groups</a>

<div class="nav-collapse">
  <ul class="nav">
    <li><a href="#">Nav Link</a></li>
    <li><a href="#">Nav Link</a></li>
    <li><a href="#">Nav Link</a></li>
    <li><a href="#">Nav Link</a></li>
  </ul>
</div>

しかし、どうすれば2番目のナビゲーションを作成できますか？

このコードを複製してに変更data-target=".nav-collapse"してみましdata-target=".nav-collapse2"たが、機能しません。

Twitter Bootstrapは、ページに2つ以上のレスポンシブナビゲーションを表示する機能を提供しますか？

4

2 に答える 2

10

あなたは正しい方向に進んでいます。

.nav-collapseブートストラップによって内部的に使用され、実際にナビゲーションを応答して折りたたむようにします。.nav-collapse2として使用する代わりに、 （を使用することに加えて）data-target独自のクラス/IDを使用します.nav-collapse

次に例を示します。

<a class="btn btn-navbar" data-toggle="collapse" data-target=".col1">groups</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".col2">groups2</a>

<div class="nav-collapse col1">
    <ul class="nav">
        <li><a href="#">Nav Link</a></li>
        <li><a href="#">Nav Link</a></li>
    </ul>
</div>
<div class="nav-collapse col2">
    <ul class="nav">
        <li><a href="#">Nav Link2</a></li>
        <li><a href="#">Nav Link2</a></li>
   </ul>
</div>

これがフィドルです。

于 2013-02-14T05:04:17.417 に答える
0

@ gurch101が言ったのと同じように始め、次にこれを使用して他のメニューを非表示にしました。

// Only show one navigation at a time
jQuery(function($){
  $('.col1').on('show.bs.collapse', function(){
    var otherNav = $('.col2');
    if (otherNav.is(':visible')) {
      otherNav.collapse('hide');
    }
  });
  $('.col2').on('show.bs.collapse', function(){
    var otherNav = $('.col1');
    if (otherNav.is(':visible')) {
      otherNav.collapse('hide');
    }
  });
});
于 2014-08-28T14:37:57.390 に答える