带有下拉图标-chevron 的 Bootstrap Accordion 导航 [英] Bootstrap Accordion navigation with dropdown icon-chevron
问题描述
我有一个 bootstrap nav-tabs nav-stacked 列表,它需要使用手风琴来折叠所有列表,除了最近点击的列表或活跃的子列表.
I have a bootstrap nav-tabs nav-stacked list which needs to use accordion to collapse all lists except for the one most recently clicked, or with active children.
我有这个工作,但似乎无法弄清楚如何让雪佛龙改变方向,除非点击.
I have this working somewhat, but can't seem to figure out how to get the chevron to change direction unless clicked.
我以前只设置了这个来做折叠,而不是手风琴折叠......所以需要一些 javascript 建议来让它完全发挥作用.
I formerly had this only set up to do collapse, and not accordion-collapse... so need some javascript advice to get it fully functional.
jsfiddle:http://jsfiddle.net/utcwebdev/NBcmh/17/(使用正常的引导标记,加上自定义的 bootswatch css 主题)
jsfiddle: http://jsfiddle.net/utcwebdev/NBcmh/17/ (uses normal bootstrap markup, plus a custom bootswatch css theme)
这是标记:
<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:
And here's the 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');
});
推荐答案
谢谢你.这是一个不需要更改 HTML 标记的修复程序.在var target之前添加如下js:
Thank you sody. Here is a fix which did not require changing HTML markup. Add the following js prior to var target:
$(parent).find('.accordion-toggle').not($(event.target)).addClass('collapsed');
感谢该项目的开发者.
http://jsfiddle.net/utcwebdev/NBcmh/24/
这篇关于带有下拉图标-chevron 的 Bootstrap Accordion 导航的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!