jquery - 单击以打开另一个时关闭打开的下拉菜单

Question

我有以下 javascript，通过在单击导航中的链接时添加“dropped”类来打开下拉菜单。

$("li.dropdown-control > a").click( function () {
          var nextSibling = $(this).next();
              nextSibling.toggleClass("dropped");  
 });

我的问题是，当一个下拉菜单打开时，当您单击打开另一个下拉菜单时它不会关闭。如何找到打开的下拉菜单并在打开另一个下拉菜单时将其关闭？

Answer 1

在切换要打开的类之前，您不能删除所有已删除的类：

例如：

$("li.dropdown-control > a").click( function () {
          $('.dropped').removeClass('dropped');
          var nextSibling = $(this).next();
              nextSibling.addClass("dropped");  
 });

Answer 2

如果您只想在任何时候打开一个下拉菜单，您可能希望从之前标记为“已删除”的所有内容中删除已删除的类。这就是我要做的...

$("li.dropdown-control > a").click( function () {
      $('.dropped').removeClass('dropped');
      var nextSibling = $(this).next();
          nextSibling.toggleClass("dropped");  
});

Answer 3

试试这个

JS代码

$("li.dropdown-control > a").click( function () {
          $(this).removeClass("dropped");
          var nextSibling = $(this).next('ul');
              nextSibling.addClass("dropped");  
 });

现场演示