Question

所以我从上一个问题中获得了这段代码：http://jsfiddle.net/928Dj/4/

$("ul.opt").addClass("hidden");
$('#filter > li > a').on("click", function(e) {
      $(this).next('ul').toggle();
});

我想知道是否有人能告诉我如何让它仍然可以切换打开和关闭，但如果一个菜单打开并且我点击打开另一个菜单它会关闭第一个菜单，意味着只有一个菜单可以随时打开。

Answer 1

首先尝试隐藏已打开的ul元素，然后toggle隐藏当前元素

 $("ul.opt").addClass("hidden");
  $('#filter > li > a').on("click", function (e) {
    var cache = $(this).next('ul');
    $('#filter ul:visible').not(cache).hide();
    cache.toggle();
  });

DEMO

Answer 2

您可以在显示当前子菜单之前隐藏所有可见子菜单，如下所示

$("ul.opt").addClass("hidden");
$('#filter > li > a').on("click", function(e) {
  var ul = $(this).next('ul');
  $('ul li ul:visible').not(ul).hide();
  ul.toggle();
});

Demo

Answer 3

这是最好的方法。你也可以试试这个：

$("ul.opt").addClass("hidden");
$('#filter > li > a').on("click", function(e) {
      $(this).next('ul').toggle();
      $(this).parent().siblings().find('.opt').hide();
});

Fiddle

Jquery只允许扩展一个菜单项

3 个答案:

DEMO