twitter-bootstrap – 带有下拉图标-Vevron的Bootstrap手风琴导

发布时间：2020-12-17 21:26:47 所属栏目：安全来源：网络整理

导读：我有一个bootstrap nav-tabs导航堆栈列表,需要使用accordion来折叠所有列表,除了最近点击的列表或活动子项. 我有点工作,但似乎无法弄清楚除非点击,如何让雪佛龙改变方向. 我之前只有这个只是设置崩溃,而不是手风琴崩溃……所以需要一些javascript建议才能使

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

解决方法

似乎bootstrap崩溃插件没有完全实现手风琴.它仅为单击的元素切换折叠的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',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');
    }
});

并且不要忘记添加手风琴组课程.

http://jsfiddle.net/NBcmh/29/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!