Javascript 带多重折叠的引导导航堆叠选项卡
嗨,伙计们,我想做一个垂直导航选项卡和嵌套的子导航选项卡我使用了stackoverflow的示例代码,但我需要更复杂的东西,我尝试了,但没有得到我想要的,下面是我想要的屏幕快照,如果有人对它有想法,请给我一些建议,它应该在bootstrap 2.3上 下面是代码Javascript 带多重折叠的引导导航堆叠选项卡,javascript,jquery,css,twitter-bootstrap,tabs,Javascript,Jquery,Css,Twitter Bootstrap,Tabs,嗨,伙计们,我想做一个垂直导航选项卡和嵌套的子导航选项卡我使用了stackoverflow的示例代码,但我需要更复杂的东西,我尝试了,但没有得到我想要的,下面是我想要的屏幕快照,如果有人对它有想法,请给我一些建议,它应该在bootstrap 2.3上 下面是代码 <div class="row"> <div class="span4"> <div class="side-nav-container affix-top">
<div class="row">
<div class="span4">
<div class="side-nav-container affix-top">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a data-toggle="tab" href="#Tab2">Tab2</a>
</li>
<li><a data-toggle="tab" href="#Tab3">Tab3</a>
</li>
<li><a data-toggle="tab" href="#Tab4">Tab4</a>
</li>
<li> <a data-toggle="collapse" href="#Tab1">Tab1</a>
<ul class="subnav nav nav-tabs nav-stacked collapse" id="Tab1">
<li><a class="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a>
<ul class="subnav nav nav-tabs nav-stacked collapse" id="Tab1">
<li><a class="supersub" data-toggle="tab" href="#Subtab1">My Super Sub</a></li>
</ul>
</li>
<li><a class="subnavtab" data-toggle="tab" href="#Subtab2">Subtab2</a>
</li>
<li><a class="subnavtab" data-toggle="tab" href="#Subtab3">Subtab3</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="span8">
<div class="tab-content">
<div class="tab-pane fade active" id="Tab2">Content 2</div>
<div class="tab-pane fade" id="Tab3">Content 3</div>
<div class="tab-pane fade" id="Tab4">Content 4</div>
<div class="tab-pane fade" id="Subtab1">Content 1a</div>
<div class="tab-pane fade" id="Subtab2">Content 1b</div>
<div class="tab-pane fade" id="Subtab3">Content 1c</div>
</div>
</div>
</div>
-
-
-
-
-
-
-
内容2
内容3
内容4
内容1a
内容1b
内容1c
您可以这样做:
.nav-tabs > li li {
margin-left: 60px;
}
那就行了。
这里的CSS乱七八糟,我不确定我能不能帮你完全重写它。事实上,我不需要CSS,我只是希望它能用jquery工作。checkout this fiddle@koala_dev请帮助我,我被你的答案困住了。我在子选项卡1中添加了另一个子选项卡,但当我添加jquery时,它将无法完美工作