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

Adding open/closed icon to Twitter Bootstrap collapsibles (accordions)

提问by Darren

I've set up this simple version of the Bootstrap accordion:

我已经设置了这个简单版本的 Bootstrap手风琴：

Simple accordion:http://jsfiddle.net/darrenc/cngPS/

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

Currently the icon only points down, but does anyone know what JS would be needed to be implemented so as to change the class of the icon to:

目前图标只指向down，但有没有人知道需要实现什么 JS 以便将图标的类更改为：

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

...so that it points upwhen expandedand toggles back to downagain when collapsed, and so fourth?

...这样它在展开时指向上方，在折叠时再次切换回下方，然后是第四个？

回答by Andrei Veve

Here it's the answer for those who are looking for a solution in Bootstrap 3(like myself).

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

The HTML part:

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>

The js part:

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");
});

---

---

Example accordion:

示例手风琴：

Bootply accordion example

Bootply 手风琴示例

回答by Martin Wickman

Here is my approach for Bootstrap 2.x. It is just some css. No JavaScript needed:

这是我对 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;
    }

Just add class accordion-caretto the accordion-group div, like this:

只需将类手风琴插入符添加到手风琴组 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>

回答by Philipp Hofmann

The Bootstrap Collapse has some Events that you can react to:

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");
    });
});

回答by bafromca

Use CSSes pseudo-selector :after using Bootstrap 3's integrated Glyphicons for a no JS answerwith minor modification to your HTML...

使用 CSSes 伪选择器：在使用 Bootstrap 3 的集成 Glyphicons 后，只需对 HTML 稍作修改即可获得无 JS 答案...

CSS

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

HTML

Add class="collapsed"to any anchor tags that are closed by default.

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

This will turn anchors such as

这将转动锚点，例如

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

into

进入

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

CodePen Live Example

CodePen 实时示例

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

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

Screenshot

截屏

回答by John Magnolia

Added to @muffls answer so that this works with all twitter bootstrap collapse and makes the change to the arrow before the animatation starts.

添加到@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");
});

Depending on your HTML structure you may need to modify the parent().

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

回答by user2273425

I think the best codes are these:

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

  $('#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");
      });

回答by rbsthlm

If anyone is interested this is how you do it with BS3 since they changed the event names:

如果有人感兴趣，这就是您使用 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');
});

You simply change the class names in the example to the ones you use in your case.

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

回答by Andreas Bergstr?m

The most readable CSS-only solution would probably be to use the aria-expanded attribute. Remember that you'll need to add aria-expanded="false" to all collapse-elements as this is not set on load (only on first click).

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

The HTML:

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>

The CSS:

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

Works with Bootstrap 3.x.

适用于 Bootstrap 3.x。

回答by General Electric

This is how I do it without any js.

这就是我在没有任何js的情况下做到的。

I used the icon glyphicon-triangle-right but it works with any other icon, what it does is that it applies a 90 degrees rotation to the icon when the panel is open or not. I'm using Bootstrap 3.3.5for this one.

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

CSS Code

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);
}

This is the HTML structure taken from the Bootstrap example

这是取自 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>

回答by Geert

A bootstrap v3 solution (where the events have different names), also using only one jQuery selector (as seen here):

自举v3的解决方案（其中的事件有不同的名称），也只使用一个jQuery选择（如看到这里）：

$('.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');
});