Wie Bootstrap scrolspy mit zusammenklappbaren Menü verwenden?

Ich habe eine MCQ Fragen Website. In einer Prüfung kann es 100-200 Fragen aus verschiedenen Themen geben. Also möchte ich die Navigation erleichtern. Da die Navigation ziemlich groß ist, möchte ich Fragen unter offenem Thema öffnen, d. H. Wenn Thema 1 aktiv ist, ist nur der Frage-Link unter Thema 1 sichtbar wie die rechte Navigation der Bootstrap-Website. Meine Arbeitsprobe ist unten angegeben.Wie Bootstrap scrolspy mit zusammenklappbaren Menü verwenden?

Ich verwendet Bootstrap scrollspy nach ihrer Anleitung vor Ort und es hat gut funktioniert. Aber wenn ich versuche, es kollabierbar zu machen (wie Bootstrap Website die richtige Navigation) es funktioniert nicht.

Ich bin mit 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>

Quelle

2015-02-03 Chayan

Ihren Beispielcode hinzufügen wird es helfen, das Problem zu finden, in der Regel ist es eine schlechte Schließen von Tags oder die Klasse zugeschrieben – CheGueVerra

ich den Beispielcode von meinem Projekt hinzugefügt habe. Könnten Sie mir helfen, die Lösung @CheGueVerra zu finanzieren – Chayan

Nach einer tiefen Forschung über Bootstrap-Websites nativen CSS und JavaScript-Datei fand ich, dass sie CSS verwenden, um die Navigation zusammenklappbar zu machen. sie machen die ul unter einem aktiven sichtbar und andere Kinder zeigen keine an.

Quelle

2015-02-08 07:07:11 Chayan

Chayan's answer ist sehr gut gestellt. Außer dass display: visible bei mir nicht funktionierte, habe ich display: block verwendet und es hat den Trick gemacht.

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

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

Quelle

2016-07-21 07:28:46

Wie Bootstrap scrolspy mit zusammenklappbaren Menü verwenden?

Antwort

Verwandte Themen