将打开/关闭图标添加到 Twitter Bootstrap 可折叠项（手风琴）答案

【问题标题】：Adding open/closed icon to Twitter Bootstrap collapsibles (accordions)将打开/关闭图标添加到 Twitter Bootstrap 可折叠项（手风琴）
【发布时间】：2012-11-26 13:16:33
【问题描述】：

我已经设置了这个简单版本的 Bootstrap accordion：

简单的手风琴： http://jsfiddle.net/darrenc/cngPS/

目前图标只指向向下，但是有谁知道需要实现什么JS才能将图标的类更改为：

<i class="icon-chevron-up"></i>

...这样它在展开时指向上，而在折叠时又切换回向下，所以是第四个？

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

对于那些在 Bootstrap 3 中寻找解决方案的人（比如我自己），这就是答案。

HTML 部分：

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
    <span class="glyphicon glyphicon-minus"></span>
  </button>
</div>
<div id="demo" class="collapse in">Some dummy text in here.</div>

js部分：

$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});

手风琴示例：

Bootply accordion example

【讨论】：

正是 bootstrap 3.x 所需要的。如果使用 2.x 删除 .bs.collapse。我还更改了shown and hidden to show and hide，因此动画在手风琴打开之前发生。
这应该是正确的答案，因为它也在版本 4 中运行
嵌套手风琴怎么样？子元素没有人字形，但我仍然可以在父元素上进行切换。

【解决方案2】：

这是我对 Bootstrap 2.x 的方法。这只是一些CSS。无需 JavaScript：

    .accordion-caret .accordion-toggle:hover {
        text-decoration: none;
    }
    .accordion-caret .accordion-toggle:hover span,
    .accordion-caret .accordion-toggle:hover strong {
        text-decoration: underline;
    }
    .accordion-caret .accordion-toggle:before {
        font-size: 25px;
        vertical-align: -3px;
    }
    .accordion-caret .accordion-toggle:not(.collapsed):before {
        content: "▾";
        margin-right: 0px;
    }
    .accordion-caret .accordion-toggle.collapsed:before {
        content: "▸";
        margin-right: 0px;
    }

只需将类 accordion-caret 添加到手风琴组 div，如下所示：

<div class="accordion-group accordion-caret">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
            <strong>Header</strong>
        </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
        <div class="accordion-inner">
            Content
        </div>
    </div>
</div>

【讨论】：

我真的很喜欢马丁的这种方法。特别是因为非常不引人注目。
我发现这有一个例外 - 初始插入符号始终显示为所有部分展开。一旦你展开然后再次折叠，它就是正确的。
@Robb - 我在 html 中的“collapse”元素中包含了“collapsed”类，以解决初始箭头的问题。我的 html 有点不同，但它可能会工作
我也喜欢 css 解决方案。我的一些同行在 css 中比 javascript 更舒服，所以这对我的团队来说是一个更好的解决方案。感谢您解决初始化部分。现在效果很好！

【解决方案3】：

Bootstrap Collapse 有一些您可以做出反应的事件：

$(document).ready(function(){    
    $('#accordProfile').on('shown', function () {
       $(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
    });

    $('#accordProfile').on('hidden', function () {
       $(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
    });
});

【讨论】：

Muffls，你是明星！也很好很简单，谢谢你;-)
不客气！您也可以使用显示或隐藏来代替显示和隐藏。试试看。你会看到你喜欢哪一个。
嗨，Muffs，您知道为什么这在我的现场测试站点上不起作用吗？ datascrew.co.uk/gordonedge.com
add $(document).ready(... in you main.js 我已经把代码放在上面了。
Bootstrap3：事件名称需要有 .bs.collapse，所以它们是 on('hide.bs.collapse') 和 on('show.bs.collapse')，或者在什么时候显示/隐藏你想给它添加更多的 CSS 过渡。

【解决方案4】：

使用 CSSes 伪选择器：在使用 Bootstrap 3 的集成 Glyphicons 获得 无 JS 答案 并稍微修改您的 HTML...

CSS

.panel-heading [data-toggle="collapse"]:after
{
    font-family: 'Glyphicons Halflings';
    content: "\e072"; /* "play" icon */
    float: right;
    color: #b0c5d8;
    font-size: 18px;
    line-height: 22px;

    /* rotate "play" icon from > (right arrow) to down arrow */
    -webkit-transform: rotate(-90deg);
    -moz-transform:    rotate(-90deg);
    -ms-transform:     rotate(-90deg);
    -o-transform:      rotate(-90deg);
    transform:         rotate(-90deg);
}
.panel-heading [data-toggle="collapse"].collapsed:after
{
    /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
    -webkit-transform: rotate(90deg);
    -moz-transform:    rotate(90deg);
    -ms-transform:     rotate(90deg);
    -o-transform:      rotate(90deg);
    transform:         rotate(90deg);
}

HTML

将class="collapsed" 添加到默认关闭的任何锚标记。

这将使锚点如

<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">

进入

<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">

CodePen 现场示例

http://codepen.io/anon/pen/VYobER

截图

【讨论】：

此jsbin链接已被举报
将其移至 CodePen。感谢您的报告。试试看！

【解决方案5】：

添加到@muffls 答案中，以便它适用于所有 twitter bootstrap 折叠并在动画开始之前更改箭头。

$('.collapse').on('show', function(){
    $(this).parent().find(".icon-chevron-left").removeClass("icon-chevron-left").addClass("icon-chevron-down");
}).on('hide', function(){
    $(this).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-left");
});

根据您的 HTML 结构，您可能需要修改 parent()。

【讨论】：

+1 把它放进去，它对我有用 - 只是修改为使用 icon-chevron-right 而不是 left
这个对我有用。单击而不是单击的选项卡时，其他代码会更改所有选项卡的类:)

【解决方案6】：

我认为最好的代码是这些：

  $('#accordion1').collapse({
    toggle: false
  }).on('show',function (e) {
        $(e.target).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
      }).on('hide', function (e) {
        $(e.target).parent().find(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
      });

【讨论】：

这对我来说是唯一可行的解决方案，其余的切换所有手风琴组的类。干杯:)

【解决方案7】：

如果有人感兴趣，这就是您使用 BS3 的方式，因为他们更改了事件名称：

$('.collapse').on('show.bs.collapse', function(){
  var i = $(this).parent().find('i')
  i.toggleClass('fa-caret-right fa-caret-down');
}).on('hide.bs.collapse', function(){
  var i = $(this).parent().find('i')
  i.toggleClass('fa-caret-down fa-caret-right');
});

您只需将示例中的类名更改为您在案例中使用的类名。

【讨论】：

感谢 b3rgstrom，感谢。下次使用 BS3 时我会检查一下。
没有问题，认为将来有人可能会遇到同样的问题：)

【解决方案8】：

最易读的纯 CSS 解决方案可能是使用 aria-expanded 属性。请记住，您需要将 aria-expanded="false" 添加到所有折叠元素，因为这不是在加载时设置的（仅在第一次单击时）。

HTML：

<h2 data-toggle="collapse" href="#collapseId" aria-expanded="false">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="glyphicon glyphicon-chevron-down"></span> Title
</h2>

CSS：

h2[aria-expanded="false"] span.glyphicon-chevron-down,
h2[aria-expanded="true"] span.glyphicon-chevron-right
{
    display: none;
}

h2[aria-expanded="true"] span.glyphicon-chevron-down,
h2[aria-expanded="false"] span.glyphicon-chevron-right
{
    display: inline;
}

适用于 Bootstrap 3.x。

【讨论】：

这非常有效。因为我的锚标记是数据切换，所以我只是在 CSS 中将 h2 更改为 a

【解决方案9】：

这是我的解决方案，它从@john-magnolia 发布的解决方案进一步完善并解决了它的一些问题

/**
 * Toggle on/off arrow for Twitter Bootstrap collapsibles.
 *
 * Multi-collapsible-friendly; supports several collapsibles in the same group, on the same page.
 */
function animateCollapsibles() {

    $('.collapse').on('show', function() {
        var $t = $(this);
        var header = $("a[href='#" + $t.attr("id") + "']");
        header.find(".icon-chevron-right").removeClass("icon-chevron-right").addClass("icon-chevron-down");
    }).on('hide', function(){
        var $t = $(this);
        var header = $("a[href='#" + $t.attr("id") + "']");
        header.find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-right");
    });
}

这里是示例标记：

<div class="accordion" id="accordion-send">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
                <i class="icon icon-chevron-right"></i> Send notice
            </a>
        </div>
        <div id="collapse-refund" class="accordion-body collapse">
            <div class="accordion-inner">
                <p>Lorem ipsum Toholampi city</p>
            </div>
        </div>
    </div>
</div>

【讨论】：

好人 - 我觉得自己是个大白痴，但无法让这些解决方案中的任何一个工作：-S 我能想到的唯一区别是我使用新的 bootstrap3，因此得到了类“ glyphicon glyphicon-chevron-right。任何指针？
Bootstrap 3 不是向后兼容的版本。请参考 Bootstrap 3 文档如何迁移代码。
你好，Mikko，谢谢你，是的，我收集到了，在这里得到了很好的帮助：stackoverflow.com/questions/18147338/…

【解决方案10】：

一个引导 v3 解决方案（其中事件具有不同的名称），也仅使用一个 jQuery 选择器（如 here 所示）：

$('.accordion').on('hide.bs.collapse show.bs.collapse', function (n) {
    $(n.target).siblings('.panel-heading').find('i.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

【讨论】：

优秀答案

【解决方案11】：

这就是我没有任何js的方式。

我使用了 glyphicon-triangle-right 图标，但它适用于任何其他图标，它的作用是在面板打开与否时对图标应用 90 度旋转。我正在为此使用 Bootstrap 3.3.5。

CSS 代码

h4.panel-title a {
    display: block;

}
h4.panel-title a.collapsed .glyphicon-triangle-right {
        color: #ada9a9 !important;
        transform: rotate(0deg);
}
h4.panel-title a .glyphicon-triangle-right {
        color: #515e64 !important;
        transform: rotate(90deg);
}

这是来自 Bootstrap 示例的 HTML 结构

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab" id="headingOne">
                                    <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                            Proven Expertise
                                            <span class="glyphicon glyphicon-triangle-right pull-right" aria-hidden="true"></span>
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                    <div class="panel-body">
                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                    </div>
                                </div>
                            </div>

                        </div>

【讨论】：

这个方法对我有用，但初始状态旋转了 90 度。您能否建议如何使初始状态不旋转（0度）？谢谢！
在锚元素中添加 class="collapsed" 以避免发生在你身上的事情
感谢您的回复！我实际上尝试了 '
' 但没有运气。这是正确的吗？
它必须在锚标记上，因为当 onClick 事件触发时，bootstrap js 会发生什么变化，请在此页面上查看，正在使用我提到的解决方案acubavoy.com/preguntas-frequentes

【解决方案12】：

以上方法都不适合我，但我想出了这个方法，它奏效了：

function toggleChevron(el) {
  if ($(el).find('i').hasClass('icon-chevron-left'))
      $(el).find('.icon-chevron-left').removeClass("icon-chevron-left").addClass("icon-chevron-down");
  else 
      $(el).find('.icon-chevron-down').removeClass("icon-chevron-down").addClass("icon-chevron-left");
}

HTML 实现：

<div class="accordion" id="accordion-send">
  <div class="accordion-group">
    <div class="accordion-heading" onClick="toggleChevron(this)">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
        <i class="icon icon-chevron-right"></i> Send notice
      </a>
      ...

【讨论】：

【解决方案13】：

@RobSadler：

RE Martin Wickman 的纯 CSS 版本...

您可以通过将手风琴插入符号放在锚标记上并默认为其提供折叠类来解决该问题。像这样：

<div class="accordion-group">
<div class="accordion-heading">
    <a class="accordion-toggle accordion-caret collapsed" data-toggle="collapse" href="#collapseOne">
        <strong>Header</strong>
    </a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
    <div class="accordion-inner">
        Content
    </div>
</div>

这对我有用。

【讨论】：

【解决方案14】：

对于 Bootstrup 3.2 + FontAwesome

$(document).ready(function(){    
    $('#accordProfile').on('shown.bs.collapse', function () {
       $(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
    });

    $('#accordProfile').on('hidden.bs.collapse', function () {
       $(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
    });
});

有时你必须这样写。如果是这样的话

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');

按隐藏菜单时自动生成 (class="collapsed")。

ps 当你需要创建树形菜单时

【讨论】：

【解决方案15】：

这已通过多种方式得到解答，但我想出的是最简单和最简单的 Bootstrap 3 和字体真棒。我刚刚做了

$('a.toggler').on('click', function () {$('i', this).toggleClass('fa-caret-up');});

这只是切换我要显示的图标的 CSS 类。我将类 toggler 添加到我想要应用它的项目中。这可以添加到您想要切换图标的任何项目上。

【讨论】：

【解决方案16】：

这是针对这个非常古老的问题的 2021 更新...

引导程序 5

使用 CSS 上/下三角形的图标无关解决方案（不使用特定的图标库）...

/* for up.down arrows after collapse items with submenus */
[data-bs-toggle="collapse"]::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}

[data-bs-toggle="collapse"].collapsed::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-bottom: 0;
  border-right: 0.3em solid transparent;
  border-top: 0.3em solid;
  border-left: 0.3em solid transparent;
}

Demo using sidebar with collapse submenu

【讨论】：

感谢齐姆！对于所有回复的人，感谢您的意见！有趣的是这篇文章仍然具有相关性，再次感谢大家:)

【解决方案17】：

另一个使用折叠功能本身的无 JavaScript 解决方案：

/* Prevent block display and transition animation */
.expand-icon.collapse.in,
.collapse-icon.collapse.in {
  display: inline; }
.expand-icon.collapsing {
  display: none; }

/* HTML Toggler with glyphicons */
<a data-toggle="collapse" href=".my-collapse">
 <span class="my-collapse collapse-icon collapse in">
  <span class="glyphicon glyphicon-collapse-up"></span>
 </span>
 <span class="my-collapse expand-icon collapse">
  <span class="glyphicon glyphicon-expand"></span>   
 </span>
</a>

【讨论】：

【解决方案18】：

对于使用 Bootstrap 3 的纯 CSS（和无图标）解决方案，我不得不根据上面 Martin Wickman 的回答做一些摆弄。

我没有使用手风琴-* 符号，因为它是通过 BS3 中的面板完成的。

另外，我必须在页面加载时打开的项目中包含初始 HTML aria-expanded="true"。

这是我使用的 CSS。

.accordion-toggle:hover { text-decoration: none; }
.accordion-toggle:hover span, .accordion-toggle:hover strong { text-decoration: underline; }
.accordion-toggle:before { font-size: 25px; }
.accordion-toggle[data-toggle="collapse"]:before { content: "+"; margin-right: 0px; }
.accordion-toggle[aria-expanded="true"]:before { content: "-"; margin-right: 0px; }

这是我净化后的 HTML：

<div id="acc1">    
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent="#acc1" href="#acc1-1">Title 1
                    </a>
            </span>
        </div>
        <div id=“acc1-1” class="panel-collapse collapse in">
            <div class="panel-body">
                Text 1
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#acc1” href=“#acc1-2”>Title 2
                    </a>
            </span>
        </div>
        <div id=“acc1-2” class="panel-collapse collapse">
            <div class="panel-body">
                Text 2                  
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案19】：

最短的答案。

HTML

<a data-toggle="collapse" data-parent="#panel-quote-group" href="#collapseQuote">
    <span class="toggle-icon glyphicon glyphicon-collapse-up"></span>
</a>

JS：

<script type="text/javascript">
 $(function () {
     $('a[data-toggle="collapse"]').click(function () {
     $(this).find('span.toggle-icon').toggleClass('glyphicon-collapse-up glyphicon-collapse-down');
     })
 })
 </script>

当然，您可以使用任何选择器代替锚标记a，如果您的图标位于单击的元素之外，您也可以使用特定的选择器代替this。

【讨论】：

【解决方案20】：

这是一个解决方案，它使用某种材料设计、bootstrap 4.5/5 alpha 和完全非 javascript 创建一个可扩展的部分。

头部样式

<style>
[data-toggle="collapse"] .fa:before {
    content: "\f077";
}

[data-toggle="collapse"].collapsed .fa:before {
    content: "\f078";
}
</style>

正文 html

<div class="pt-3 pb-3" style="border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; cursor: pointer;">
<a href="#expandId" class="text-dark float-right collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">
    <i class="fa" aria-hidden="false"></i>
</a>
<a href="#expandId" class="text-dark collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">Expand Header</a>
<div class="collapse" id="expandId">
    CONTENT GOES IN HERE
</div>

【讨论】：

HTML 部分：

js部分：

手风琴示例：

HTML：

CSS：

' 但没有运气。这是正确的吗？