Question

我有一个带有徽章的bootstrap list-group-item，如下所示：

<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函数，所以它与我的函数覆盖引导程序有关。

如何在保持崩溃行为的同时停止传播？

Answer 1

我通过使用bootstrap的折叠函数找到了解决方案：

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

单击stopPropagation同时保持引导崩溃行为

1 个答案: