twitter-bootstrap Twitter Bootstrap 手风琴图标不会改变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14882404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap accordion icon doesnt change
提问by monstro
I have this accordion thing from bootstrap. The arrow icons point down.
我从 bootstrap 得到了这个手风琴。箭头图标指向下。
Then I click on Competency1, I get (Competency1 icon up, Competency2 icon down):
然后我点击能力 1，我得到（能力 1 图标向上，能力 2 图标向下）：
But, if I click on Competency2 now, I get (Competency1 icon is still up, Competency2 icon up):
但是，如果我现在点击 Competency2，我会得到（Competency1 图标仍然向上，Competency2 图标向上）：
Is this a bug in bootstrap, or it could be easily fixed?
这是引导程序中的错误，还是可以轻松修复？
Thanks.
谢谢。
回答by Zoe
It's hard to offer suggestions without seeing your code. You might be triggering the image swap only on the 'show' event (check for typos in your js).
没有看到你的代码就很难提供建议。您可能仅在 'show' 事件上触发图像交换（检查您的 js 中的拼写错误）。
Here is what I use to create the same effect on my sites:
这是我用来在我的网站上创建相同效果的内容：
HTML:
HTML：
<div class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<i class="icon-chevron-down"></i>
Collapsible Group Item #1
</a>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<i class="icon-chevron-down"></i>
Collapsible Group Item #2
</a>
</div>
</div>
</div>
JavaScript:
JavaScript：
$('.accordion').on('show hide', function (n) {
$(n.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-chevron-up icon-chevron-down');
});
回答by OliverP
It appears that this is occurring because clicking on Competency2 collapses Competency1 when Competency1 is already open. Because there is no click event that occurs on Competency1 when it collapses in this manner, the caret is still pointing upward.
出现这种情况似乎是因为当 Competency1 已打开时，单击 Competency2 会折叠 Competency1。因为在 Competency1 以这种方式折叠时没有发生在 Competency1 上的点击事件，所以插入符号仍然指向上方。
回答by geoffs3310
This is a bug in bootstrap. If you inspect your markup when you toggle one of the headings that has a class of .accordion-toggle it toggles it from having the class collapsed or not. When you click a different heading to the one that is open though it doesn't add the class of collapsed onto the heading of the open element. This fixed it for me:
这是引导程序中的错误。如果您在切换具有 .accordion-toggle 类的标题之一时检查您的标记，它将切换该类是否折叠。当您单击与打开的标题不同的标题时，尽管它不会将折叠类添加到打开元素的标题上。这为我修复了它：
$('.accordion-toggle').click(function() {
if($(this).hasClass('collapsed')) {
$('.accordion-toggle').not(this).addClass('collapsed');
}
});
回答by Ravi
You can use this code, for changing the icons.
您可以使用此代码来更改图标。
Script part:
脚本部分：
jQuery('document').ready(function() {
$('.accordion').on('show hide', function (n) {
var targetEle = $(n.target).siblings('.accordion-heading').find('.accordion-toggle');
if($(n.target).hasClass("in")){
targetEle.children(".icon-chevron-down").show();
targetEle.children(".icon-chevron-up").hide();
}
else{
targetEle.children(".icon-chevron-down").hide();
targetEle.children(".icon-chevron-up").show();
}
});
});
Note: For using this code, in the html part, you have to include both image tags ie. chevron-up and chevron-down.
注意：要使用此代码，在 html 部分，您必须包含两个图像标签，即。V 形向上和 V 形向下。
回答by user2045407
Using jquery.js 1.10.2 and bootstrap-collapse.js v2.3.0, this is a rehash of the above. Upon loading the document, it collapses all items but the first one and then handles susequent show/hide events.
使用 jquery.js 1.10.2 和 bootstrap-collapse.js v2.3.0，这是上述内容的重述。加载文档时，它会折叠除第一个之外的所有项目，然后处理后续的显示/隐藏事件。
$(document).ready(function () {
$(".accordion-body").on("shown", function (evt) {
setIcon(evt.target, true);
});
$(".accordion-body").on("hidden", function (evt) {
setIcon(evt.target, false);
});
$(".accordion-body").collapse("hide");
$("#collapse-faq-1").collapse("show");
});
function setIcon(acdBody, isShown) {
var indicator = "indicator" + acdBody.id.substr(acdBody.id.lastIndexOf("-"));
if (!isShown) {
$("#" + indicator).removeClass("icon-chevron-up").addClass("icon-chevron-down");
} else {
$("#" + indicator).removeClass("icon-chevron-down").addClass("icon-chevron-up");
}
}
HTML:
HTML：
<div class="accordion" id="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-1">
<i id="indicator-1" class="icon-chevron-down"></i>
FAQ Item 1
</a>
</div>
<div id="collapse-faq-1" class="accordion-body collapse in">
<div class="accordion-inner">
Answer 1 ...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-2">
<i id="indicator-2" class="icon-chevron-down"></i>
FAQ Item 2
</a>
</div>
<div id="collapse-faq-2" class="accordion-body collapse in">
<div class="accordion-inner">
Answer 2 ...
</div>
</div>
</div>
</div>
