なぜforループがjQueryのtoggleClassの動作を変更しているのですか

Question

自分のウェブサイトテンプレートのドキュメントを作成しましたが、ドロップダウンメニューを作成しようとしています。アイデアは簡単です：リンクの名前の横にあるキャレットをクリックすると、もう一度クリックするとそのサブメニューが開き、閉じなければなりません。さらに、他のサブメニューが開いている場合は、それらを閉じて、一度に1つのサブメニューしか開くことはできません。

私の解決策：私はtoggleClassとforループを使用しました。

私の問題は次のとおりです。一度に1つのサブメニューのみを開くように2つのforループを追加した後、私のtoggleClassは機能しなくなりました。つまり、キャレットをクリックすると、サブメニューが開きますが、キャレットを再びクリックすると、サブメニューが閉じず、開いたままになります。

jQuery(document).ready(function(){ 
 

 
    $(".indicator").on("click", showLinks); 
 

 
    function showLinks(){ 
 

 
     var allMenus = $("#ab-menu, #str-menu, #ht-menu"); 
 
     var allCarets = $("#ab-caret, #str-caret, #ht-caret"); 
 

 
     for(i = 0; i < allMenus.length; i++){ 
 
     $(allMenus).eq(i).removeClass("show"); 
 
     } 
 
     for(i = 0; i < allCarets.length; i++){ 
 
     $(allCarets).eq(i).removeClass("caret-rotate"); 
 
     } 
 

 
     var linkId = $(this).attr("data-menu"); 
 
     var caretId = $(this).attr("data-caret"); 
 

 
     $(linkId).toggleClass("show"); 
 
     $(caretId).toggleClass("caret-rotate"); 
 

 
    }; 
 

 
});

#ab-menu, 
 
#str-menu, 
 
#ht-menu { 
 
    background-color: #1d3557; 
 
    max-height: 0; 
 
    margin: 0.2em 0; 
 
    opacity: 0.5; 
 
    overflow: hidden; 
 
    transition: 0.4s ease-in-out; 
 
} 
 
#ab-menu.show, 
 
#str-menu.show, 
 
#ht-menu.show { 
 
    max-height: 500px; 
 
    opacity: 1; 
 
} 
 
.fa .fa-caret-down { 
 
    display: block; 
 
    color: #fff; 
 
} 
 
.caret-rotate { 
 
    transition: 0.4s ease-in-out; 
 
} 
 
.fa-caret-down.caret-rotate { 
 
    color: #a8dadc; 
 
    transform: rotate(-90deg); 
 
}

<nav> 
 
    <ul class="nav-links"> 
 
     <li class="about-panel">About <span class="fa fa-caret-down indicator" id="ab-caret" data-menu="#ab-menu" data-caret="#ab-caret"></span> 
 
     <ul class="sub-menu about-sub-menu" id="ab-menu"> 
 
      <li class="about-links"><a href="#about">Main Features</a></li> 
 
      <li class="about-links"><a href="#getting-started">Getting Started</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    <ul class="nav-links"> 
 
     <li class="structure-panel">Structure <span class="fa fa-caret-down indicator" id="str-caret" data-menu="#str-menu" data-caret="#str-caret"></span> 
 
     <ul class="sub-menu structure-sub-menu" id="str-menu"> 
 
      <li class="structure-links"><a href="#sections">Sections</a></li> 
 
      <li class="structure-links"><a href="#grid">Bootstrap-grid</a></li> 
 
      <li class="structure-links"><a href="#carousel">Bootstrap Carousel</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    <ul class="nav-links"> 
 
     <li class="how-to-panel">How-to <span class="fa fa-caret-down indicator" id="ht-caret" data-menu="#ht-menu" data-caret="#ht-caret"></span> 
 
     <ul class="sub-menu how-sub-menu" id="ht-menu"> 
 
      <li class="how-to-links"><a href="#nav">Navigation</a></li> 
 
      <li class="how-to-links"><a href="#images">Images</a></li> 
 
      <li class="how-to-links"><a href="#headers">Headers</a></li> 
 
      <li class="how-to-links"><a href="#icons">Icons</a></li> 
 
      <li class="how-to-links"><a href="#colors">Colors</a></li> 
 
      <li class="how-to-links"><a href="#fonts">Fonts</a></li> 
 
      <li class="how-to-links"><a href="#buttons">Buttons</a></li> 
 
      <li class="how-to-links"><a href="#portfolio">Portfolio</a></li> 
 
      <li class="how-to-links"><a href="#map">Map</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    <ul class="nav-links"> 
 
     <li class="credits"><a href="#credits">Credits</a></li> 
 
    </ul> 
 
    </nav>

Answer 1

コードが近くにあります。 @ Gooseの編集はうまくいきますが、他のtoggleClass（）コードも必要です。これは私のために働いています：

function showLinks(){ 
    var allMenus = $("#ab-menu, #str-menu, #ht-menu"), 
     allCarets = $("#ab-caret, #str-caret, #ht-caret"), 
     linkId = $(this).attr("data-menu"), 
     caretId = $(this).attr("data-caret"); 

    $(allMenus).not($(linkId)).removeClass("show"); 
    $(allCarets).not($(linkId)).removeClass("caret-rotate"); 

    $(linkId).toggleClass("show"); 
    $(caretId).toggleClass("caret-rotate"); 
}; 

Answer 2

ループが必要とされていません。ここで

はコードです。あなたはあなたのコードを単純化することができます、私はこれがあなたの問題を解決すると仮定します。

var allMenus = $("#ab-menu, #str-menu, #ht-menu"); 
var allCarets = $("#ab-caret, #str-caret, #ht-caret"); 

allMenus.removeClass("show"); 
allCarets.removeClass("caret-rotate"); 

Answer 3

これは、/（それのルックスから、jQueryとフォント素晴らしい）、すべての依存関係をつかんjsfiddleなく、正確なテスト環境を得るのは難しいですが、あなたのDOMを見て、私はあなたを変更することができるかもしれないと思いますクリックイベントの場合は次のようになります。

$(document).ready(function() { 
    //Create onclick events for all elements with a class of indicator 
    $(".indicator").on("click", function() { 
     //Making jQuery object out of this so we can use jQuery methods 
     $this = $(this); 
     //Add the caret-rotate class to this 
     $this.addClass('caret-rotate'); 

     //Use the data attribute you made to pass the ID and add a class of show 
     $($this.data("menu")).addClass("show"); 

     //The siblings method is very useful here to clear out the caret-rotate classes of everything except this one 
     $this.siblings().removeClass("caret-rotate"); 
     //Grab the siblings again and filter through their children to find the sub-menu class elements, then remove the show class from them 
     $this.siblings().children(".sub-menu").removeClass("show"); 

     //Alternatively you could try this to compress the two lines above into one by chaining the commands, but I can't test right now. Try commenting the above two lines out and uncommenting this when you are testing: 
     //$this.siblings().removeClass("caret-rotate").children(".sub-menu").removeClass("show"); 
    }); 
});