javascript - 单击 stopPropagation 同时保持 Bootstrap 崩溃行为

Question

我有一个带有徽章的 Bootstrap 列表组元素，如下所示:

<a class="list-group-item list-group-item-action" href="#" revision="211147" id="commit0">
    <span class="badge collapsed" id="badge0" data-toggle="collapse" data-target="#ul0" >
        changed files:1
    </span>
    <ul class="list-group changed-files-list collapse" id="ul0" aria-expanded="false" style="height: 0px;">
        <li class="list-group-item changed-file">
            release.groovy
        </li>
    </ul>
</a>

它包含徽章所针对的折叠 ul。

同时，当点击时，a 元素被选中(因为它是列表组的一部分，可以进行多项选择)。

我尝试插入这段代码:

$('.badge').on('click', function(e){
    //$('#'+this.id).click();
    e.stopPropagation();
});

这样当点击徽章时 a 元素就不会被选中。

如果我使用此代码，则不会显示 ul 元素。我猜 bootstrap 使用了 on click 函数，所以它与我覆盖 bootstrap 的函数有关。

如何在保持折叠行为的同时停止传播？

Answer 1

我通过使用 bootstrap 的折叠功能找到了解决方案:

$('.badge').click( function(e){
    $('#ul'+this.id.substring(5)).collapse("toggle");
    e.stopPropagation();
});