javascript - 儿童手风琴指示器图标 twitter bootstrap 的变化

Question

我有带有下拉指示器图标的两级 Twitter 引导手风琴。问题是当我关闭子组时，父组中的指标也会发生变化。（对不起我的英语不好）

$('.accordion-body').on('show', function() {
   $(this).siblings('.accordion-heading').children('.ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
});

$('.accordion-body').on('hide', function() {
   $(this).siblings('.accordion-heading').children('.ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
});

JSfiddle

Answer 1

嗯，这很模糊，但原因如下：默认情况下，“显示”和“隐藏”事件会冒泡，因此在子可折叠中触发的隐藏/显示事件也被父可折叠捕获。

解决方案是以这种方式调整听众：

$('.accordion-body').on('show', function(e) {
    e.stopPropagation();
    …
}

这是您的小提琴的工作版本：http: //jsfiddle.net/HwNYB/2/。

边注：

e.stopPropagation(); 

有它的 IE 对应物：

e.cancelBubble = true;