접이식 메뉴로 부트 스트랩 scrollspy를 사용하는 방법은 무엇입니까?

본인은 MCQ Question 웹 사이트를 운영하고 있습니다. 시험에서 다른 과목에서 100-200 질문이있을 수 있습니다. 그래서 내비게이션을 더 쉽게 만들고 싶습니다. 네비게이션이 상당히 커서 공개 된 주제 아래에서 질문을 열고 싶습니다. 즉, 주제 1이 활성화되면 주제 1의 질문 링크 만 부트 스트랩 웹 사이트의 오른쪽 탐색처럼 표시됩니다. 내 작업 샘플은 아래에 나와 있습니다.접이식 메뉴로 부트 스트랩 scrollspy를 사용하는 방법은 무엇입니까?

사이트 지침에 따라 부트 스트랩 scrollspy를 사용했으며 이 정상적으로 작동했습니다. 그러나 접을 수있게하려고 할 때 (부트 스트랩 웹 사이트의 오른쪽 탐색처럼) 그것은 작동하지 않습니다. 내가 부트 스트랩을 사용하고

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

출처

2015-02-03 Chayan

이 문제를 발견하는 데 도움이 될 것입니다 샘플 코드를 추가, 보통 태그의 나쁜 폐쇄 나 클래스는 내 프로젝트의 샘플 코드를 추가 한 – CheGueVerra

돌렸다. @CheGueVerra 솔루션 자금 조달을 도와 주시겠습니까? – Chayan

깊은 부트 스트랩 웹 사이트를 통해 연구 기본 CSS와 자바 스크립트 파일 후 나는 그들이 탐색 축소를 만들기 위해 CSS를 사용하는 것을 발견했다. 그들은 ul을 활성화 된 표시 밑으로 만들고 다른 자식 표시는 none으로 만듭니다.

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

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

출처

2015-02-08 07:07:11 Chayan

Chayan's answer이 매우 적합합니다. 그 display : visible은 나를 위해 작동하지 않아서, 그래서 나는 display : block을 사용했다.

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

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

출처

2016-07-21 07:28:46

접이식 메뉴로 부트 스트랩 scrollspy를 사용하는 방법은 무엇입니까?

답변

관련 문제