我有一个bootstrap nav-tabs导航堆叠列表,需要使用accordion来折叠除最近点击的列表或活动子节点之外的所有列表。
我有点工作,但似乎无法弄明白如何让雪佛龙改变方向,除非点击。
我以前只设置了崩溃,而不是手风琴崩溃...所以需要一些javascript建议才能使其完全正常运行。
jsfiddle:http://jsfiddle.net/utcwebdev/NBcmh/17/ (使用正常的bootstrap标记,加上自定义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');
});
答案 0 :(得分:3)
对于手风琴来说,似乎没有完全实现bootstrap collapse插件。它仅为单击的元素切换折叠的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)
})
<强> 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');
}
});
不要忘记添加accordion-group
类。
答案 1 :(得分:1)
如果你正在使用Font Awesome 3.2.1,那么在css中,使用以下内容来调用更改:
.collapsed .icon-chevron:before {content: "\f078";}
.icon-chevron:before {content: "\f077";}
答案 2 :(得分:0)
谢谢你。这是一个不需要更改HTML标记的修复程序。在var target之前添加以下js:
$(parent).find('.accordion-toggle').not($(event.target)).addClass('collapsed');
由于此项目的开发人员的信用。
答案 3 :(得分:0)
是否可以为手风琴添加另一个级别?
<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>
我添加了这部分html,但它没有显示。
答案 4 :(得分:0)
我遇到了类似的问题,但是我已经设法找到手风琴箭头切换的解决方案,但我无法想象如何保持活动的一直打开,同时能够折叠其他箭头。