7

私が抱えている同じ問題の例を探し回っていますが、まだ運がありません。bootstrap.js を使用して、ブートストラップでマルチレベルの折りたたみ可能なサイド ナビゲーションを作成しようとしています。

私の問題は、第 2 レベルに追加したことですが、リスト項目をクリックしてトリガーして開くと、メニュー全体が折りたたまれます。メニューを再度開くと、2 番目のレベルのメニューも開いています。私のコードは以下の通りです：

          <div class="sidebar-nav">
      <p class="sidenav-header">Units and Lessons:</p>
      <ul class="nav nav-list">
        <li class="nav-header" data-toggle="collapse" data-target="#content-areas"> <span class="nav-header-primary">
                Content Areas
        </span>
            <ul class="nav nav-list collapse" id="content-areas">
                <li><a href="#" title="Title">All</a></li>
                <li><a href="#" title="Title">Urban Planning</a></li>
                <li><a href="#" title="Title">Sustainability</a></li>
                <li><a href="#" title="Title">Public Administration</a></li>
                <li data-toggle="collapse" data-target="#nav-health" data-parent="#content-areas"><a href="#" title="Title">Health</a>
                  <ul class="nav-secondary nav-list collapse" id="nav-health">
                    <li><a href="#" title="Title">Introduction</a></li>
                    <li><a href="#" title="Title">Lesson: What is Epilepsy?</a></li>
                    <li><a href="#" title="Title">Lesson: Pathology</a></li>
                  </ul>
                </li>
            </ul>
        </li>
          <li class="nav-header" data-toggle="collapse" data-target="#languages"> <span class="nav-header-primary">
                Languages
        </span>
            <ul class="nav nav-list collapse" id="languages">
                <li><a href="#" title="Title">All</a></li>
                <li><a href="#" title="Title">Arabic</a></li>
                <li><a href="#" title="Title">Turkish</a></li>
                <li><a href="#" title="Title">Hebrew</a></li>
            </ul>
        </li>
    </ul>  

      </div>

私が話している特定のセクションは、「コンテンツ領域」の下の「ヘルス」リスト項目の下にあります。

どんな助けでも大歓迎です。ありがとう！

4

2 に答える 2

6

マークアップの問題は、リスト内をクリックしようとするとメニュー全体が折りたたまれていることです。たとえば、コンテンツ エリア内の [すべて] をクリックすると、コンテンツ エリアが折りたたまれます。あなたの場合、第 2 レベルのメニューである Health についても同じことが起こっています。

これは、アコーディオン見出しが指定されていないために発生します。次のような例を見つけるBootstrap Collapse Documentationを調べてください。

<div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
    Collapsible Group Item #1
  </a>

見出しを指定すると、第 2 レベルのナビゲーションが正常に機能するはずです。

検証用のフィドルを作成しました。ドキュメンテーションに従ってコンテンツ領域を変更したところ、第 2 レベルのメニューが正常に機能しました。ただし、Languages メニュー項目は変更していないので、動作を確認できます (Languages が展開されたら、リスト内をクリックしてみてください)。

于 2013-09-10T21:44:43.980 に答える