Jquery 折叠时Twitter引导更改图标

我有一个可折叠元素，它包含选项卡，其中可折叠元素在标题文本的左侧有一个图标（图标箭头向下）。折叠此元素时，图标将变为图标向上箭头。它工作得很好，但是，当我在选项卡之间切换时，图标也会发生变化

这是我的JSFIDLE：

内容1
内容2
内容3
$（'#collapseH'）。在（'show hide'，函数（e）上{
$（“#collapseP”）.toggleClass（'icon-arrow-up-icon-arrow-down'，200）；
});

您需要从以下位置更改选择器：

$('#collapseH').on('show hide', function(e){

为此：

 $('#collapseP').on('click', function(e){

您的

#collapseH

将所有选项卡包装为HTML，因此当您单击其中一个选项卡时，您也会单击

#collapseH

。因此，我将选择器更改为仅当用户单击箭头本身时才触发

#collapseP

用这个

$('#collapseP').on('click', function(e){
            $('#collapseP').toggleClass('icon-arrow-down , icon-arrow-up', 200);
});

---

看起来，单击选项卡时会触发

show

事件。如果您在切换箭头之前添加了一个id等于collapseH的检查，则应该修复它。这是一把小提琴

---

这是因为事件的嘈杂声

$('#collapseH').on('show hide', function(e){
    console.log(this, e.target, e.currentTarget)
    if($(this).is(e.target)){
        $('#collapseP').toggleClass('icon-arrow-up icon-arrow-down', 200);
    }
});

---

这里是一个CSS唯一的解决方案。将切换更改为：

<span class="arrow-toggle" data-toggle="collapse" data-target="#collapseH" id="collapseP">
    <span class="icon-arrow-down"></span>
    <span class="icon-arrow-up"></span>
</span>

---

下面是一个。

似乎是随机的，它会影响选项卡的外部元素。这件事可能正在酝酿中吗？也谢谢你，我用了@silagy的代码。它们都能用，但我觉得他的比你的简单。@Smguy9没问题。我确实注意到，当你向箭头发送垃圾邮件时，当你绑定到click方法时，它的状态可能会变得一团糟。@sissonb是的，你说得对，我刚刚注意到了。我想我可以用你的：）

if（$（this）.is（e.target））

nice欢迎来到StackOverflow！最佳答案--谢谢。将类从

class=“collapse in”

设置为

class=“collapse”

时，会显示错误的图标。请参阅更新的小提琴：

$('#collapseH').on('show hide', function(e){
    console.log(this, e.target, e.currentTarget)
    if($(this).is(e.target)){
        $('#collapseP').toggleClass('icon-arrow-up icon-arrow-down', 200);
    }
});

<span class="arrow-toggle" data-toggle="collapse" data-target="#collapseH" id="collapseP">
    <span class="icon-arrow-down"></span>
    <span class="icon-arrow-up"></span>
</span>

.arrow-toggle .icon-arrow-down,
.arrow-toggle.collapsed .icon-arrow-up {
    display: inline-block;
}
.arrow-toggle.collapsed .icon-arrow-down,
.arrow-toggle .icon-arrow-up {
    display: none;
}