扩展div双重效果JQuery中的扩展按钮

Question

small problem here. I have an table and when I want to click on the run this table should expand and furthermore there is a expand button in the same row, which also should expand a div.

The problem: When I click the row everything works fine, the div will slideIn. When I click on the button (which is in the table row) there is double effect. So the Contentdiv will slide in and afterwards slide out immediately. This is logical because with the button click I click both (table row + button) so the toggle effect happens 2 times, but I don't know how to solve this in a good way.

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

So how do I avoid the "double effect" on it.

Answer 1

Use jQuery's event.stopPropagation() method to prevent the click event also firing on the tr element when clicking the a element:

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

Answer 2

James Donnelly give the solution. But maybe you can something like this :

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