如何在单击collapse元素中的链接时跳过触发引导崩溃？

Question

我正在使用Twitter Bootstrap折叠功能来隐藏表格行.我还在跨度中的文本中有一个链接,触发崩溃/展开.不幸的是,当我点击链接时,首先展开折叠的文本,然后跟踪链接.

我希望能够在点击链接时跳过触发折叠切换.这里有一些代码可以演示这个问题(这里有jsfiddle示例):

<table class="table">
    <tr data-toggle="collapse" data-target="#collapseRow1" style="cursor: pointer;">
        <td>Click me to show more!</td>
        <td><a href="http://getbootstrap.com/css/">but don't expand after clicking this link</a></td>
    </tr>
    <tr class="collapse" id="collapseRow1">
        <td>hidden content1</td>
        <td />
    </tr>
</table>

Answer 1

在click事件中使用event.stopPropagation().

http://api.jquery.com/event.stoppropagation/

$("table.table td a").on('click',function(e){e.stopPropagation();})

要了解为什么事件冒泡DOM树,请阅读 http://api.jquery.com/category/events/event-object/