Twitter bootstrap 3 如何使用带可折叠菜单的引导scrollspy?
我有一个MCQ问题网站。考试中可能会有100-200个不同科目的问题。所以我想让导航更容易。由于导航非常大,所以我想在开放主题下打开问题,即:当主题1处于活动状态时,只有主题1下的问题链接可见,就像Bootstrap网站的右导航一样。我的工作样本如下 我使用引导scrollspy根据他们的网站说明和它 很好。但是当我试图使它可折叠时(如引导) 网站的右导航)它不工作 我使用的是Bootstrap-3.3.2Twitter bootstrap 3 如何使用带可折叠菜单的引导scrollspy?,twitter-bootstrap-3,scrollspy,Twitter Bootstrap 3,Scrollspy,我有一个MCQ问题网站。考试中可能会有100-200个不同科目的问题。所以我想让导航更容易。由于导航非常大,所以我想在开放主题下打开问题,即:当主题1处于活动状态时,只有主题1下的问题链接可见,就像Bootstrap网站的右导航一样。我的工作样本如下 我使用引导scrollspy根据他们的网站说明和它 很好。但是当我试图使它可折叠时(如引导) 网站的右导航)它不工作 我使用的是Bootstrap-3.3.2 <body data-spy="scroll" data-target="#sub
<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>
...
...
...
...
...
主题1
1.问题1
方案A
方案B
备选案文C
方案D
...
20问题20
方案A
方案B
备选案文C
方案D
...
科目5
81问题81
方案A
方案B
备选案文C
方案D
...
100问题100
方案A
方案B
备选案文C
方案D
...
...
在深入研究引导式网站本机css和javascript文件后,我发现它们使用css使导航可折叠。它们使ul处于活动可见状态,而其他子ul显示不可见
.subject-ul .question-ul{
display:none;
}
.subject-ul li.active>.question-ul{
display:visible;
}
他说得很好。除了display:visible对我不起作用,所以我使用display:block,它完成了这个任务
.subject-ul .question-ul{
display:none;
}
.subject-ul li.active>.question-ul{
display:block;
}
添加示例代码这将有助于找出问题所在,通常是标记或类属性关闭不好。我已经添加了我项目的示例代码。你能帮我资助CheGueVerra的解决方案吗