Question

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

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

<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();
});

那么如何避免＆＃34;双重效果＆＃34;在它上面。

Answer 1

单击click元素时，使用jQuery's event.stopPropagation() method可防止tr元素在a元素上触发：

[event.stopPropagation]可防止事件冒泡DOM树，从而阻止任何父处理程序收到事件通知。

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

Answer 2

詹姆斯唐纳利给出了解决方案。但也许你可以这样：

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

在Expand div double effect JQuery中展开Button

2 个答案: