Jak korzystać z przewijania bootstrap ze zwijanym menu?

Mam stronę z pytaniem o MCQ. Na egzaminie może być 100-200 pytań z różnych przedmiotów. Dlatego chcę ułatwić nawigację. Ponieważ nawigacja jest dość duża, dlatego chcę otworzyć pytania pod otwartym tematem, np .: gdy temat 1 jest aktywny, widoczny jest tylko link do pytania pod tematem 1, tak jak właściwa nawigacja witryny Bootstrap. Moja robocza próba jest podana poniżej.Jak korzystać z przewijania bootstrap ze zwijanym menu?

Użyłem scrollspy Bootstrap zgodnie z ich instrukcją strony, a to zadziałało. . Ale kiedy próbuję zrobić to składane (jak Bootstrap prawo nawigacji strony) to nie działa.

Używam Bootstrap - 3.3.2

<body data-spy="scroll" data-target="#subjectNavbar" data-offset="0"> 
    <header id="header" class="container-fluid navbar-fixed-top"> 
     ... 
    </header> 
    <div class="container"> 
     <div class="row"> 
      <aside id="left-column" class="col-sm-3"> 
       <nav id="subjectNavbar" class="sub-nav"> 
        <ul class="nav subject-ul"> 
         <li> 
          <a href="#subject-1">Subject 1</a> 
          <ul class="list-inline question-ul"> 
           <li id="question-no-1"><a href="#question-1">1</a></li> 
           <li id="question-no-2"><a href="#question-2">2</a></li> 
           <li id="question-no-3"><a href="#question-3">3</a></li> 
           ... 
           <li id="question-no-20"><a href="#question-20">20</a></li> 
          </ul> 
         </li> 
         <li> 
          <a href="#subject-2">Subject 2</a> 
          <ul class="list-inline question-ul"> 
           <li id="question-no-21"><a href="#question-21">21</a></li> 
           <li id="question-no-22"><a href="#question-22">22</a></li> 
           <li id="question-no-23"><a href="#question-23">23</a></li> 
           ... 
           <li id="question-no-40"><a href="#question-40">40</a></li> 
          </ul> 
         </li> 
         ... 
         <li> 
          <a href="#subject-5">Subject 5</a> 
          <ul class="list-inline question-ul"> 
           <li id="question-no-81"><a href="#question-81">81</a></li> 
           <li id="question-no-82"><a href="#question-82">82</a></li> 
           <li id="question-no-83"><a href="#question-83">83</a></li> 
           ... 
           <li id="question-no-100"><a href="#question-100">100</a></li> 
          </ul> 
         </li> 
        </ul> 
       </nav>     
      </aside> 
      <section class="col-sm-6"> 
       <div class="question-paper"> 
        <div class="subject-group" id="subject-1"> 
         <h2>Subject 1</h2> 
         <article id="question-1"> 
          <header><em>1.</em> Question 1</header> 
          <ol> 
           <li>Option A</li> 
           <li>Option B</li> 
           <li>Option C</li> 
           <li>Option D</li> 
          </ol> 
         </article> 
         ... 
         <article id="question-20"> 
          <header><em>20.</em> Question 20</header> 
          <ol> 
           <li>Option A</li> 
           <li>Option B</li> 
           <li>Option C</li> 
           <li>Option D</li> 
          </ol> 
         </article> 
        </div> 
        ... 
        <div class="subject-group" id="subject-5"> 
         <h2>Subject 5</h2> 
         <article id="question-81"> 
          <header><em>81.</em> Question 81</header> 
          <ol> 
           <li>Option A</li> 
           <li>Option B</li> 
           <li>Option C</li> 
           <li>Option D</li> 
          </ol> 
         </article> 
         ... 
         <article id="question-100"> 
          <header><em>100.</em> Question 100</header> 
          <ol> 
           <li>Option A</li> 
           <li>Option B</li> 
           <li>Option C</li> 
           <li>Option D</li> 
          </ol> 
         </article> 
        </div> 
       </div> 
      </section> 
      <aside id="right-column" class="col-sm-3"> 
       ... 
      </aside> 
     </div><!--/row--> 
    </div><!--/.container--> 
    <footer class="container"> 
     ... 
    </footer> 
</body>

Źródło

2015-02-03 Chayan

Dodaj swój przykładowy kod to pomoże, aby dowiedzieć się problem, zazwyczaj jest to zły zamykanie tagów lub klasa przypisana – CheGueVerra

Dodałem przykładowy kod mojego projektu. Czy możesz mi pomóc w sfinansowaniu rozwiązania @CheGueVerra – Chayan

Po głębokim badań nad stronach bootstrapowych rodzimy CSS i JavaScript pliku I okazało się, że używają oni css aby składane nawigacji. sprawiają, że ul pod aktywnym widocznym, a inne dziecko nie wyświetla żadnego znaku.

.subject-ul .question-ul{ 
    display:none; 
} 

.subject-ul li.active>.question-ul{ 
    display:visible; 
}

Źródło

2015-02-08 07:07:11 Chayan

Chayan's answer jest bardzo dobrze umieścić. Poza tym, że ekran: visible nie działał dla mnie, więc użyłem display: block i to wystarczyło.

.subject-ul .question-ul{ 
    display:none; 
} 

.subject-ul li.active>.question-ul{ 
    display:block; 
}

Źródło

2016-07-21 07:28:46

Jak korzystać z przewijania bootstrap ze zwijanym menu?

Odpowiedz

Powiązane problemy