jquery问题

Question

我有以下结构

    <table>
    <tr>
        <td><img class='show_detail'></td>
    <tr>
    <tr class='detail'>
        <td>XYZ</td>
    <tr>

    <tr>
        <td><img class='show_detail'></td>
    <tr>
    <tr class='detail'>
        <td>ABC</td>
    <tr>

    </table>

我希望如果单击类show_detail而不是显示下一个详细行，则隐藏所有打开的带有类详细信息的tr意味着如果首先显示详细信息类，则隐藏第二个详细信息类并显示第一个详细信息类。

我为此尝试了jquery

$('.show_detail').click(function() {
    $('.show_detail').next('.detail').slideDown();
});

Answer 1

试试这个

$('.show_detail').click(function() {
   var elem = $(this).parents('tr').next('.detail');  // get the next tr with class detail
   $('.detail').not(elem).hide();  // hide all the tr with detail class excluding the next.
    elem.toggle();   // toggle(hide <-> show) the next tr with detail class. 
});