javascript - toggle() 用不同的元素隐藏/显示

Question

我有一个列表，所以当我单击其中一个列表时，会显示另一个列表。我点击返回，列表将被隐藏。这是隐藏和显示的代码。

$(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 具有类 .data 的父级，则意味着单击的是新显示的行。所以我们找到父div并关闭它。否则我们将找到并隐藏/显示紧邻的下一行。

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