javascript - Expand div双效JQuery中的展开按钮

Question

这里有一个小问题。我有一个表，当我想单击运行时，该表应该展开，而且同一行中有一个展开按钮，它也应该展开一个 div。

问题:当我单击该行时，一切正常，div 将滑入。当我单击按钮(位于表行中)时，会产生双重效果。所以 Contentdiv 会滑入，然后立即滑出。这是合乎逻辑的，因为单击按钮时我同时单击了两者(表格行+按钮)，因此切换效果发生了两次，但我不知道如何以好的方式解决这个问题。

<tr class='header mySlideToggler'>
<td class='align-center'>$username</td>
<td>0 %</td>
<td>22 Aug 2014</td>
<td>$done / $quantity</td>
<td>$running</td>
<td>$untouched</td>
<td>
<a href='#' class='table-icon edit' title='Edit'></a>
<a href='#' class='table-icon expand mySlideToggler' title='Expand'></a>
<a href='#' class='table-icon delete' title='Delete'></a>
</td>
</tr><tr style='padding: 0'><td colspan='7' style='padding: 0'>
<div class='slideMe' style='display: none'><br><br><br></div></td></tr>

JQuery:

$('.mySlideToggler').click(function( event ){
    event.preventDefault();
    $(this).closest('tr').next().find('.slideMe').slideToggle();
});

那么我如何避免它的“双重效应”。

Answer 1

使用jQuery's event.stopPropagation() method防止单击 a 元素时 click 事件也在 tr 元素上触发:

[event.stopPropagation] prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

$('.mySlideToggler').click(function( event ) {
    event.stopPropagation();
    ...
});