twitter-bootstrap Bootstrap 手风琴导航，带有下拉图标-雪佛龙
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15637911/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Accordion navigation with dropdown icon-chevron
提问by PlayGod
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.
我有一个 bootstrap nav-tabs nav-stacked 列表，它需要使用手风琴折叠所有列表，除了最近点击的列表或活动的孩子。
I have this working somewhat, but can't seem to figure out how to get the chevron to change direction unless clicked.
我有这个工作，但似乎无法弄清楚如何让 V 形改变方向，除非点击。
I formerly had this only set up to do collapse, and not accordion-collapse... so need some javascript advice to get it fully functional.
我以前只设置为折叠，而不是手风琴折叠...所以需要一些 javascript 建议才能使其完全正常运行。
jsfiddle: http://jsfiddle.net/utcwebdev/NBcmh/17/(uses normal bootstrap markup, plus a custom bootswatch css theme)
jsfiddle：http: //jsfiddle.net/utcwebdev/NBcmh/17/（使用普通的引导标记，加上一个自定义的 bootswatch css 主题）
Here's the markup:
这是标记：
<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>
And here's the javascript:
这是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');
});
采纳答案by PlayGod
Thank you sody. Here is a fix which did not require changing HTML markup. Add the following js prior to var target:
谢谢索迪。这是一个不需要更改 HTML 标记的修复程序。在 var target 之前添加以下 js：
$(parent).find('.accordion-toggle').not($(event.target)).addClass('collapsed');
Credit due to a developer on this project.
归功于该项目的开发商。
回答by sody
It seems that bootstrap collapse plugin not fully implemented for accordions. It toggles collapsed css class only for clicked element.
似乎手风琴没有完全实现引导折叠插件。它仅为单击的元素切换折叠的 css 类。
$(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) {
var $this = $(this), href
, target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
, option = $(target).data('collapse') ? 'toggle' : $this.data()
// this line
$this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
$(target).collapse(option)
})
UPDTo fix this you just need to find all toggle buttons and do the same with them:
UPD要解决此问题，您只需找到所有切换按钮并对其执行相同操作：
$(document).on('click.collapse.data-api', '.accordion-toggle', function(event) {
var $this = $(this),
parent = $this.data('parent'),
$parent = parent && $(parent);
if ($parent) {
$parent.find('[data-toggle=collapse][data-parent=' + parent + ']').not($this).addClass('collapsed');
}
});
And don't forget to add accordion-groupclasses.
并且不要忘记添加accordion-group类。
回答by webdever
If you're using Font Awesome 3.2.1, then in the css, use the following to call the changes:.collapsed .icon-chevron:before {content: "\f078";}
.icon-chevron:before {content: "\f077";}
如果您使用的是 Font Awesome 3.2.1，则在 css 中，使用以下代码调用更改：.collapsed .icon-chevron:before {content: "\f078";}
.icon-chevron:before {content: "\f077";}
回答by Labanino
Is it possible to add another level to the accordion?
是否可以为手风琴添加另一个级别？
<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>Page 2 </a>
<ul id="subnav01" class="nav nav-list collapse">
<li><a href="#1">Page 2.1</a></li>
<li><a href="#" data-toggle='collapse' data-target='#subnav01.1', data-parent='#sidenav01.1' class="accordion-toggle collapsed">
<i class="icon-chevron-up pull-right"></i>Page 2.2</a>
<ul id="subnav01.1" class="nav nav-list collapse">
<li><a href="#1">Sub-level 1</a></li>
<li><a href="#2">Sub-level 2</a></li>
</ul>
</li>
<li><a href="#6">Page 2.3</a></li>
</ul>
</li>
I added this portion of html but it's not showing it.
我添加了 html 的这一部分，但它没有显示出来。
回答by user1467439
I was stuck on a similar problem, however I have managed to find the solution for the accordion arrows to switch but I can't figure how to keep the active one always open while being able to collapse the others.
我遇到了类似的问题，但是我设法找到了手风琴箭头切换的解决方案，但我无法弄清楚如何在能够折叠其他箭头的同时保持活动箭头始终打开。
