javascript - tr 和 td 都可点击，应该触发不同的 Action

Question

在表格中，每一列都是可点击的，点击时会显示一些内容。此外，每一列都有一个 td，它包含一个隐藏该列的按钮。像这样

隐藏部分对我不起作用。显然，先触发显示部分，然后忽略/不触发隐藏部分。

$("tr td.remove").live("click", function(){
    $(this).parent("tr:first").hide('slow');
});

$(".reveal").click(function(){
    $(this).next(".content").slideToggle("fast");
});

HTML

 <table>
    <tr class="reveal">
       <td>300,00 €</td>
       <td class="remove">X</td>
    </tr>
    <tr class="content">
        <td colspan="2">
           Content
        </td>
    </tr>
 </table>

我怎样才能把它结合起来接受这两个 Action ？我使用 jQuery 1.6.2。

fiddle : http://jsfiddle.net/2jVtC/1/

Answer 1

Here is working jsFiddle.

$('.content').hide();
$(".reveal").click(function() {
    $(this).next(".content").slideToggle("fast");
});
$("tr td.remove").live("click", function() {
    $(this).parent("tr").slideUp('slow');
    $(this).parent().next(".content").slideUp('slow');
});​

替代选择

注意:如果您使用的是 jQuery 1.6.4，closest() 方法将不起作用。

$(".reveal").click(function(){
    $(this).closest(".content").slideToggle("fast");
});