这里有一个小问题。我有一个表,当我想单击运行时,该表应该展开,而且同一行中有一个展开按钮,它也应该展开一个 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();
});
那么我如何避免它的“双重效应”。
最佳答案
使用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();
...
});
关于javascript - Expand div双效JQuery中的展开按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25265220/