javascript - 嵌套 Bootstrap Collapse 事件类问题

Question

我有一个嵌套的 Twitter bootstrap Repeater，我正在尝试使用以下脚本将事件类添加到打开的折叠中。

    function toggleChevronInner(e) {
        console.log('hello');
        $(e.target)
            .prev('.panel-heading')
            .find("i.indicator")
            .toggleClass('glyphicon-chevron-up glyphicon-chevron-down');

        $(e.target).prev('.panel-heading')
            .find("a")
            .toggleClass('active inactive');
    }
    $('#accordionInner').on('hidden.bs.collapse', toggleChevronInner);
    $('#accordionInner').on('shown.bs.collapse', toggleChevronInner);
    function toggleChevronMain(e) {
        console.log('hi');
        $(e.target)
            .prev('.panel-heading')
            .find("span.indicator")
            .toggleClass('glyphicon-triangle-top glyphicon-triangle-bottom');
        $(e.target).prev('.panel-heading')
            .find("a")
            .toggleClass('active inactive');
    }
    $('#accordion').on('hidden.bs.collapse', toggleChevronMain);
    $('#accordion').on('shown.bs.collapse', toggleChevronMain);

但是，我看到了一个奇怪的问题。当我扩展主 Accordion 即 #accordion 时，也会调用函数 toggleChevronInner。

为什么即使 ID 不同，也会出现这样的行为？如何修复？

您可以在http://jsbin.com/kagowi/1/edit?js,console,output查看它的实际效果。 。对于商品，它具有嵌套折叠。

Answer 1

发生这种情况的原因是事件传播的方式。

检查我给this question的答案.

因为 #accordionInner 是 #accordion 的子级 - 并且因为它们都在监听同一事件，所以它们都会对此做出响应。

要修复它，请执行以下操作:

function toggleChevronInner(e)
{
    e.stopPropagation();
    ...
}