bootstrap 3 glyphicon单击时交换状态答案

【问题标题】：bootstrap 3 glyphicon swap state on clickbootstrap 3 glyphicon单击时交换状态
【发布时间】：2013-09-10 00:10:19
【问题描述】：

帮助，我希望在引导程序 3 中折叠时交换 glyphicon 图像。我在这里找到了这个线程 Bootstrap 3 Collapse show state with Chevron icon 这在 jsfiddle 中有效，但是当复制到我自己的页面时，折叠有效，但图标不会从上到下交换。有什么我想念的吗？我什至把它放在了 Bootstrap 3 的完整下载版本中，但图标无法换出。代码如下：

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      Collapsible Group Item #1 
    </a><i class="indicator glyphicon glyphicon-chevron-down  pull-right"></i>
  </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
  <div class="panel-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high...
  </div>
</div>
</div>
</div>
</div>

这里是js：

$('#accordion .accordion-toggle').click(function (e){
var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down       glyphicon-chevron-up');
$("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

【问题讨论】：

我已经弄明白了。无需对此作出回应。对于那些对修复感兴趣的人，我将 JS 移动到页面的最底部，在调用 bootstrap.js 和 jquery.js 文件的两个 js 脚本下方。
如果您对上述修复的任何功劳感兴趣，最好将其包含在正确的答案中。因为你甚至没有链接到你提到的页面，此外，没有人阅读实时站点的源 (tm)。
嗨，在这个例子中，我如何使整个标题成为超链接，而不仅仅是文本。换句话说，当我点击标题面板时，不仅仅是文本，我想显示切换。我该怎么做？
这个例子对我很有帮助：bootply.com/61710
Bootstrap 3 Collapse show state with Chevron icon的可能重复

标签： twitter-bootstrap twitter-bootstrap-3 glyphicons

【解决方案1】：

我的一个同事刚遇到这个问题，并指出我这个问题。这是我给他的解决方案：

HTML：

<div class="panel-group move-down" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                <h4 class="panel-title">
                    Collapsible Group Item #1
                    <i class="indicator glyphicon glyphicon-chevron-down  pull-right"></i>
                </h4>
            </a>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                ...
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    Collapsible Group Item #2
                </a><i class="indicator glyphicon glyphicon-chevron-up  pull-right"></i>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
            ...
            </div>
        </div>
    </div>
</div>

JavaScript：

$.fn.accordionChevrons = function() {
    return this.each(function(i, accordion) {
        $(".accordion-toggle", accordion).click(function(ev) {
            var link = ev.target;
            var header = $(link).closest(".panel-heading");
            var chevState = $("i.indicator", header)
                .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
            $("i.indicator", accordion)
                .not(chevState)
                .removeClass("glyphicon-chevron-down")
                .addClass("glyphicon-chevron-up");
        });
    });
};

$('#accordion').accordionChevrons();

此方法允许人字形位于页眉中的任何位置，因此您也可以单击人字形来切换面板。它还允许您在同一页面上有多个手风琴，而 V 形不会相互干扰。

【讨论】：