jquery - クリックして別のドロップダウンを開くときに開いているドロップダウンを閉じる

Question

ナビゲーションのリンクがクリックされたときに「ドロップ」クラスを追加して、ドロップダウン メニューを開く次の JavaScript があります。

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

任意の時点でドロップダウンを 1 つだけ開きたい場合は、以前に「ドロップ」とマークされたすべてのものから、ドロップされたクラスを削除することをお勧めします。これが私がすることです...

$("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");  
 });

ライブデモ