Come usare lo scrollstrap bootstrap con menu comprimibile?

Ho un sito Web Domande su MCQ. In un esame ci possono essere 100-200 domande da diversi argomenti. Quindi voglio semplificare la navigazione. Dato che la navigazione è abbastanza grande, quindi voglio aprire le domande sotto il soggetto aperto vale a dire quando il Soggetto 1 è attivo, solo il collegamento a domande sotto il Soggetto 1 è visibile come la navigazione a destra del sito Web Bootstrap. Il mio esempio di lavoro è riportato di seguito.Come usare lo scrollstrap bootstrap con menu comprimibile?

Ho usato lo scrollspy di Bootstrap in base alle istruzioni del sito e l' ha funzionato correttamente. Ma quando provo a renderlo smontabile (come la navigazione destra del sito Web Bootstrap ) non funziona.

sto usando 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>

fonte

2015-02-03 Chayan

aggiungere il codice di esempio che aiuterà a scoprire il problema, di solito è una cattiva chiusura del tag o la classe attribuita – CheGueVerra

Ho aggiunto il codice di esempio del mio progetto. Potresti aiutarmi a finanziare la soluzione @CheGueVerra – Chayan

Dopo una profonda ricerca sui siti web bootstrap css e javascript nativo di file ho trovato che usano i CSS per rendere la navigazione pieghevole. rendono l'ul sotto un visibile attivo e l'altro bambino non ne mostra nessuno.

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

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

fonte

2015-02-08 07:07:11 Chayan

Chayan's answer è molto ben messo. Tranne quella visualizzazione: visibile non ha funzionato per me, quindi ho usato display: block e ha fatto il trucco.

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

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

fonte

2016-07-21 07:28:46

Come usare lo scrollstrap bootstrap con menu comprimibile?

risposta

Problemi correlati