Twitter bootstrap 引导手风琴导航，带下拉图标V形

我有一个引导导航标签导航堆叠列表，需要使用手风琴折叠所有列表，除了最近单击的列表，或具有活动子列表

我有一些工作，但似乎无法想出如何让雪佛龙改变方向，除非点击

我以前只有这个设置做折叠，而不是手风琴折叠。。。因此，需要一些javascript建议才能使其充分发挥功能

jsfiddle： （使用普通引导标记，加上自定义引导样例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>

---

这似乎是引导折叠插件没有完全实现的手风琴。它仅为单击的元素切换折叠的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');
    }
});

别忘了添加手风琴组

---

谢谢你，苏迪。这是一个不需要更改HTML标记的修复程序。在var目标之前添加以下js：

    $(parent).find('.accordion-toggle').not($(event.target)).addClass('collapsed');

本项目开发商应得的信贷

---

可以给手风琴增加另一个级别吗

<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的这一部分，但没有显示它

---

我遇到了一个类似的问题，但我已经找到了手风琴箭头切换的解决方案，但我不知道如何在折叠其他箭头的同时始终保持活动箭头处于打开状态。

如果您使用的是Font Awesome 3.2.1，那么在css中，请使用以下内容来调用更改：

。折叠。图标V形：在{content:“\f078”}之前
.icon chevron:before{content:“\f077”}

但是如果您有来自引导文档的css类标记，比如

accordion group

等等，那么所有js工作都是由引导插件完成的。在这种情况下，引导中有一个bug，需要做一些工作。但最好的选择是尽可能多地使用现有的引导代码。我相信这个错误在不久的将来会被修复。但是它将遵循与

accordion组

类相同的样式。如果不依赖

数据父属性

属性，它将不适用于嵌套的accordion。我刚刚更新了答案，您可以从这里获得代码作为示例。感谢您添加详细信息和解释。在将来的某个时候，我需要为其他导航项目添加嵌套手风琴。。。但很可能要等到引导程序的错误被消除。对于这个手风琴。。。不，它只适用于单个SUNBAV。但是，如果你提高了更多的水平，请注意你的工作在这里。

<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>