我有一个自举NAV-标签导航叠列表,它需要使用手风琴折叠所有列表除了一个最近点击,或活泼的孩子。
我有这个工作有点,但似乎无法弄清楚如何获得雪佛龙公司改变方向,除非点击。
我以前有这个仅成立做崩溃,而不是手风琴崩溃...所以需要一些JavaScript的建议得到它功能齐全。
的jsfiddle: http://jsfiddle.net/utcwebdev/NBcmh/17/ (使用正常的引导标记以及自定义CSS bootswatch主题)
这里的标记:
<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');
});