导航不会切换

Question

我有一个导航，其中两个菜单项都有一个下拉子菜单。

目前我的 jQuery 您可以单击这些并在两者之间切换以显示它们，但我无法让它们再次单击并隐藏（它们保持显示）。我需要它们相互切换，并在打开和关闭时切换隐藏和显示。

我无法使用 if else 语句，因为我正在为移动/触摸设备使用点击事件。我已经为桌面设备的悬停状态使用了 if else 语句，这很好用

JSFIDDLE

$(document).ready(function () {
      // click show sub menu
      $('ul.sub-menu').hide();
      $('#nav-1 li').click(function () {
          $('ul.sub-menu').hide();
          $(this).find('ul.sub-menu').show();
      });

});

有人知道如何将两个切换功能合并在一起吗？

我也试过.toggle();，但问题仍然存在。

编辑：使用显示/隐藏和切换的链接：http://jsfiddle.net/LPrMy/6/

Answer 1

我认为您的 hide() 函数在某种程度上弄乱了项目的显示，并且在这种情况下切换也更好。你在这里:)

 $(document).ready(function () {
          // click show sub menu
          $('ul.sub-menu').hide();
          $('#nav-1 li').click(function () {
              $(this).siblings('li').find('ul.sub-menu').hide();
              $(this).find('ul.sub-menu').toggle();
          });

  });

http://jsfiddle.net/LPrMy/4/

Answer 2

您的选择器有问题。 试试这个：

$('#nav-1 li').click(function () {
   $('ul.sub-menu').hide();
   $(this).children().next().toggle();
});

更新小提琴：http://jsfiddle.net/LPrMy/9/