Bootstrap手风琴导航带下拉图标-Chevron [英] Bootstrap Accordion navigation with dropdown icon-chevron

问题描述

我有一个引导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');

应归功于该项目的开发人员.

Credit due to a developer on this project.

http://jsfiddle.net/utcwebdev/NBcmh/24/

这篇关于Bootstrap手风琴导航带下拉图标-Chevron的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！