Bootstrap 3字体图标：点击切换状态

Question

帮帮我，我想让Bootstrap 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>

以下是JavaScript代码：

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

- user2752699

---

我已经解决了这个问题，不需要回复。对于那些感兴趣的人，我将JS代码移动到页面底部，在调用bootstrap.js和jquery.js文件的两个js脚本下面。 - user2752699

如果您对所述修复有任何信用感兴趣，最好将其包含在适当的答案中。因为您甚至没有链接到您提到的页面，而且，没有人会阅读实时网站的源代码（商标）。 - millimoose

嗨，在这个例子中，我该如何使整个标题成为超链接，而不仅仅是文本。换句话说，当我点击标题面板时，不仅仅是文本，我想要显示切换。我该怎么做？ - user1447718

这个例子真的帮了我很多：http://bootply.com/61710 - Carol Skelly

可能是Bootstrap 3 Collapse show state with Chevron icon的重复问题。 - zessx

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

该方法允许 Chevron（指导航栏中的箭头图标）出现在头部的任何位置，这样您也可以单击 Chevron 来切换面板。它还允许您在同一页上拥有多个手风琴，而不会干扰彼此的 Chevron。

- wizulus