Question

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

目前我的jQuery你可以点击这些并在两者之间切换以显示它们但我不能让它们再次点击并隐藏（它们会一直显示）。我需要它们相互切换并在点击和关闭时切换隐藏和显示。

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

$(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/

导航不会切换

2 个答案: