javascript - 嵌套 Bootstrap 折叠事件类问题

Question

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

    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();
    ...
}