带有下拉图标-chevron 的 Bootstrap Accordion 导航

Posted

技术标签:

【中文标题】带有下拉图标-chevron 的 Bootstrap Accordion 导航【英文标题】:Bootstrap Accordion navigation with dropdown icon-chevron 【发布时间】:2013-03-16 07:09:14 【问题描述】:

我有一个 bootstrap nav-tabs nav-stacked 列表,它需要使用手风琴来折叠所有列表,除了最近点击的列表或活动子列表。

我有这个工作,但似乎无法弄清楚如何让雪佛龙改变方向,除非点击。

我以前只设置了这个来做折叠,而不是手风琴折叠......所以需要一些 javascript 建议来让它完全发挥作用。

jsfiddle: http://jsfiddle.net/utcwebdev/NBcmh/17/ (使用正常的引导标记,加上自定义的 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');
);

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

【参考方案2】:

如果您使用的是 Font Awesome 3.2.1,那么在 css 中,使用以下命令调用更改:.collapsed .icon-chevron:before content: "\f078"; .icon-chevron:before content: "\f077";

【讨论】:

【参考方案3】:

谢谢你。这是一个不需要更改 html 标记的修复程序。在var target之前添加如下js:

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

感谢该项目的开发者。

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

【讨论】:

但是如果你有来自引导文档的 css 类的标记,比如accordion-group 等等,那么所有的 js 工作都是由引导插件完成的。在这种情况下,引导程序中有一个错误,需要做一些工作。但最好的选择是尽可能使用引导现有代码。我相信这个错误将在不久的将来得到修复。但它将遵循与accordion-group 类相同的风格。 如果您不依赖data-parent 属性,它将不适用于嵌套手风琴。我刚刚更新了答案,您可以从这里获取代码作为示例。 感谢您添加详细信息和解释。在未来的某个时候,我将需要为其他导航项目添加嵌套手风琴......但可能会等到引导程序错误被压扁。【参考方案4】:

是否可以为手风琴添加另一个级别?

<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,但它没有显示出来。

http://jsfiddle.net/labanino/G3PqR/12/

【讨论】:

对于这款手风琴...不,它只用于单个子导航。但是,如果您将其改进为更多级别,请在此处注明您的工作。【参考方案5】:

我遇到了类似的问题,但是我设法找到了手风琴箭头切换的解决方案,但我不知道如何保持活动箭头始终打开,同时能够折叠其他箭头。

【讨论】:

以上是关于带有下拉图标-chevron 的 Bootstrap Accordion 导航的主要内容,如果未能解决你的问题,请参考以下文章

通过在 modifyCell 中用新的 sf 符号 chevron.right 替换 V 形颜色来更改它

复制 FontAwesome 图标

材料图标连字不适用于Pug

Select2框下拉箭头UI问题

手风琴.glyphicon-chevron-up和.glyphicon-chevron-down无效

材质 ui 自动完成,带有图标