我有一个引导nav-tabs导航堆叠列表,需要使用手风琴折叠除最近点击,或与活跃的孩子以外的所有列表。Bootstrap手风琴导航与下拉图标雪佛龙
我有这个工作有点,但似乎无法弄清楚如何得到雪佛龙改变方向,除非点击。
我以前只有这样做才能做到崩溃,而不是折叠手风琴...所以需要一些javascript的建议来使其功能完整。
的jsfiddle:http://jsfiddle.net/utcwebdev/NBcmh/17/ (使用正常的引导标记以及自定义bootswatch CSS主题)
这里的标记:
<ul id="sidenav01" class="accordion nav nav-department nav-tabs nav-stacked">
<li>
<a href="department-mathematics.php"><i class="icon-home"></i> Mathematics</a>
</li>
<li>
<a href="#li02" data-toggle='collapse' data-target='#subnav01', data-parent='#sidenav01' class="accordion-toggle collapsed"><i class="icon-chevron-up pull-right"></i>Programs </a>
<ul id="subnav01" class="nav nav-list collapse">
<li><a href="#1"><i class="icon-home"></i> Programs Home</a></li>
<li><a href="#2">Undergraduate Program</a></li>
<li><a href="#3">Graduate Program</a></li>
<li><a href="#4">Undergraduate Program</a></li>
<li><a href="#5">Math Plaza</a></li>
<li><a href="#6">UTeaChattanoga</a></li>
<li><a href="#7">Placement Criteria</a></li>
<li><a href="#8">Step Ahead Math</a></li>
</ul>
</li>
<li>
<a href="#page">A Single Math Page</a>
</li>
<li>
<a href="#li03" data-toggle='collapse' data-target='#subnav02', data-parent='#sidenav01' class="accordion-toggle collapsed"><i class="icon-chevron-up pull-right"></i>Student Resources</a>
<ul id="subnav02" class="nav nav-list collapse">
<li><a href="#pimu">Pi Mu Epsilon</a></li>
<li><a href="#schol">Scholarships and Awards</a></li>
<li><a href="#links">Math Links</a></li>
<li><a href="#advise">Advisement</a></li>
</ul>
</li>
<li>
<a href="directory.php"><i class="icon-group"></i> Staff Profiles</a>
</li>
</ul>
而这里的JavaScript的:
$(document).on('click', '.accordion-toggle', function(event) {
event.stopPropagation();
var $this = $(this);
var parent = $this.data('parent');
var actives = parent && $(parent).find('.collapse.in');
// From bootstrap itself
if (actives && actives.length) {
hasData = actives.data('collapse');
//if (hasData && hasData.transitioning) return;
actives.collapse('hide');
}
var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7
$(target).collapse('toggle');
});
但是,如果你有像来自'手风琴组引导文件的CSS类的标记'等等,所有的js工作都是通过引导插件完成的。在这种情况下,bootstrap中存在一个错误,需要进行一些工作。但最好的选择是尽可能使用引导现有的代码。这个错误将在不久的将来得到修复,我相信。但它将采用'accordion-group'类的相同风格。 – sody 2013-04-01 20:59:49
如果您不依赖'data-parent'属性,它将不适用于嵌套式手风琴。我刚刚更新了答案,您可以从这里获取代码作为示例。 – sody 2013-04-01 21:03:40
感谢您提供详细信息和解释。在将来的某个时候,我需要为额外的导航项目添加嵌套的手风琴......但是可能会等到bootstrap bug被压扁。 – PlayGod 2013-04-19 13:40:02