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