toggle() hide/show 不同的元素

Question

我得到了一个列表 table，所以当我单击其中一个列表 table 时，会显示另一个列表。然后我单击返回，列表将被隐藏。这是隐藏和显示的代码。

$(document).ready(function() {
  //Hide table rows with class 'min', but appear when clicked.
  $(".data").hide();
  $(".main").click(function() {
    $(this).parent().parent().next(".data").toggle();
  });

});

但是，当我点击返回时。无法隐藏。请纠正我。谢谢

Check my example

Answer 1

DEMO

如果单击的 .main 具有 class .data 的父级，则意味着单击是在新显示的行上。所以我们找到父 div 并关闭它。否则我们将找到 hide/show 紧邻的下一行。

$(document).ready(function () {
    //Hide table rows with class 'min', but appear when clicked.
    $(".data").hide();
    $(".main").click(function () {
        if($(this).parents('.data').length)
            $(this).closest('.data').toggle();
        else
            $(this).next(".data").toggle();
    });
});

toggle() hide/show 不同的元素

toggle() hide/show with different element

javascript

jquery

toggle