在 Twitter Bootstrap 折叠菜单（手风琴）中添加开/关图标

Question

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

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

目前图标只朝下，但有人知道需要实现怎样的JS来更改图标的类吗？

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

... 这样它在展开时指向上方，并在折叠时切换回下方，以此类推？

- Darren

Answer 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手风琴示例

- Andrei Veve

---

需要针对Bootstrap 3.x进行如下操作：确保移除.bs.collapse，同时将shown和hidden改为show和hide，这样在手风琴打开之前就可以进行动画效果了。如果使用的是2.x版本，则需要进行相应的更改。 - user1881482

这应该是正确的答案，因为它也可以在版本4中运行。 - Andres Felipe

对于嵌套手风琴怎么处理？子元素没有尖角，但我仍然能在父元素上进行切换。 - esoteric

Answer 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 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>

- Martin Wickman

---

我非常喜欢这种方法，Martin。特别是因为它非常不显眼。 - J Castillo

除了一个例外，我发现这个可以使用 - 所有部分的初始光标都显示为已展开。一旦你展开然后再次折叠，它就正确了。 - Robb Sadler

@Robb - 我在HTML的"collapse"元素上包含了"class=collapsed"，以解决初始箭头的问题。我的HTML略有不同，但可能会起作用。 - Mark B

我也喜欢CSS解决方案。我的一些同事比较擅长CSS而不是JavaScript，所以这对我们团队来说是更好的解决方案。感谢您解决了初始化部分的问题。现在它运行得非常好！ - Hcabnettek

Answer 3

Bootstrap 折叠组件有一些事件可以让你做出反应：

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

- Philipp Hofmann

---

Muffls，你是一颗明星！而且非常简洁，谢谢你 ；-) - Darren

不客气！你也可以使用“show”或“hide”代替“shown”和“hidden”。试一下，你会发现哪个更适合你。 - Philipp Hofmann

嗨Muffs，你有什么想法为什么这个在我的实际测试网站上不能运行？http://datascrew.co.uk/gordonedge.com/ - Darren

每个 jQuery 代码都必须被包围在其中。没问题，欢迎。 - Philipp Hofmann

Bootstrap3: 事件名称需要带有.bs.collapse，这样它们才能在on('hide.bs.collapse')和on('show.bs.collapse')中使用，或者在添加更多CSS转换时进行显示/隐藏。 - Langeleppel

Answer 4

使用CSS伪选择器:after结合Bootstrap 3集成的Glyphicons，通过对HTML进行小修改，可以实现无需JS的答案...

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

屏幕截图

- bafromca

---

此 jsbin 链接已被举报。 - Nick Bartlett

已将其转移到 CodePen。感谢您的反馈。试一试吧！ - bafromca

Answer 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()。

- John Magnolia

---

+1 我把它放进去，就可以了 - 只需将其修改为使用 icon-chevron-right 而不是 left。 - azcoastal

这个对我有效。其他代码在点击选项卡时会更改所有选项卡的类，而不是所点击的选项卡 :) - vignesh

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

- user2273425

---

这是我唯一有效的解决方案，其他方法会切换所有手风琴组的类。干杯 :) - maximus ツ

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

您只需将示例中的类名更改为您在实际情况中使用的类名即可。

- noppe

---

感谢b3rgstrom，非常感谢。下次我使用BS3时，我会去查看的。 - Darren

没问题，我想有人在未来遇到同样的问题时会发现你的问题 :) - noppe

Answer 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。

- Andreas Bergström

---

这个完美地运作了。因为我的锚点标签是 data-toggle，所以我只需在 CSS 中将 h2 更改为 a。 - MC9000

Answer 9

这是我不用任何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>

- General Electric

---

这个方法对我有效，但初始状态被旋转了90度。您能否请教如何使初始状态不旋转（0度）？谢谢！ - Tsung-Ting Kuo

在锚元素中添加class="collapsed"以避免发生类似的情况。 - General Electric

谢谢您的回复！我实际上尝试过'<h4 class="panel-title collapsed">'，但没有成功。这样做正确吗？ - Tsung-Ting Kuo

它必须在锚标签上，因为这是Bootstrap JS在单击事件触发时更改的内容，请查看此页面，它与我提到的解决方案一起工作http://www.acubavoy.com/preguntas-frequentes - General Electric

Answer 10

这是我的解决方案，它是从@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>

- Mikko Ohtamaa

---

好的人们 - 我感觉自己很蠢，但是无法让这两个解决方案起作用 :-S 我唯一能想到的区别是我使用了新的bootstrap3，因此得到了类“glyphicon glyphicon-chevron-right”。有什么指针吗？ - benteh

Bootstrap 3不是向后兼容的版本。请参考Bootstrap 3文档以了解如何迁移代码。 - Mikko Ohtamaa

你好，Mikko，谢谢，是的，我明白了，并在这里得到了很好的帮助：https://dev59.com/12Ml5IYBdhLWcg3wwZPc - benteh