javascript - 如何使用 jQuery 显示/隐藏菜单？

Question

我有一个菜单，其中包含仅在单击它们时才显示的菜单项。要再次隐藏它们，必须再次单击它们。这一切都很好，但是当单击另一个菜单项时，我还需要隐藏其他可见的菜单项。

我目前使用：

$(this).parent().find("element").toggle();

因此，如果菜单项 2 可见并且菜单项 1 被单击，则菜单项 2 需要再次隐藏并且菜单项 1 需要可见。怎么做？

Answer 1

您可以在单击时隐藏/显示元素：

$('.menu-item').on('click', function() {
    var $this = $(this);
    $this.show();
    $this.parent().children('.menu-item').not($this).hide();
});

根据嵌套使用 find 而不是 children。

Answer 2

这个怎么样：

$('.submenu').hide();
$('.menuitem').click(function() {
  var thissubmenu = $(this).find('.submenu');   
  $('.submenu').not(thissubmenu).hide();
  $(this).find(".submenu").toggle();
});
​

我制作了一个JSFiddle，我认为它可以满足您的需求。

但也许有人知道更优雅的方式。