jQueryの：AAAをクリックすると</p> <p>は、それがメニューを開きます。</p> <p><a href="https://jsfiddle.net/zczwjdrw/7/" rel="nofollow">https://jsfiddle.net/zczwjdrw/7/</a></p> <p>メニュー1：クラスがそれぞれに切り替えるメニューやサブメニューを作成するにはどのようにこれはフィドルJS私が持っている

Question

をクリックしてください。 BBBをクリックすると、他のメニューが開き、AAAスタイルがデフォルトに戻ります。 BBBをもう一度クリックすると、サブメニューが閉じますが、デフォルトに戻りません。これをどうすれば解決できますか？

メニュー2：

サブメニューオプションをクリックすると、色付けされます。他のオプションをクリックすると、前の要素からクラスが削除されません。すべてのサブメニューオプションに色付けを続けることができます。これに対する解決策は何でしょうか？私は.sidebar1と同じ機能をjQueryで使用しています。

のjQuery：

$('.sidebar1 a').click(function(){ 
    $(this).addClass('active-sb1').siblings().removeClass('active-sb1'); 
}); 

$('.sidebar2 a').click(function(){ 
    $(this).addClass('active-sb2').siblings().removeClass('active-sb2'); 
}); 

HTML：

<div class="main-wrapper"> 

    <div class="sidebar1"> 

     <a href="ssb1" class="category" id="sb1" onclick="return false"> 
      <div>AAA</div> 
     </a> 

     <a href="ssb2" class="category" id="sb2" onclick="return false"> 
      <div>BBB</div> 
     </a> 

     <a href="ssb3" class="category" id="sb3" onclick="return false"> 
      <div>CCC</div> 
     </a> 

    </div> 

    <div class="sidebar2" id="ssb1" style="display: none;"> 

     <div class="sb2-content"> 

      <h3>Choose Something:</h3> 

     </div> 

     <div class="sb2-menu"> 

      <ul> 
       <li> 
        <a href="kas" onclick="return false">AAAAAAAAAAAAA</a> 
       </li> 

       <li> 
        <a href="weekly_reports" onclick="return false">AAAAAAAAAAA</a> 
       </li> 

       <li> 
        <a href="exceltower" onclick="return false">AAAAAAAAAAA</a> 
       </li> 
      </ul> 

     </div> 

    </div> 

    <div class="sidebar2" id="ssb2" style="display: none;"> 

     <div class="sb2-content"> 

      <h3>Choose Something:</h3> 

     </div> 

     <div class="sb2-menu"> 

      <ul> 
       <li> 
        <a href="#">BBBBBBBBBB</a> 
       </li> 

       <li> 
        <a href="#">BBBBBBBBBB</a> 
       </li> 

       <li> 
        <a href="#">BBBBBBBBBB</a> 
       </li> 
      </ul> 

     </div> 

    </div> 

    <div class="sidebar2" id="ssb3" style="display: none;"> 

     <div class="sb2-content"> 

      <h3>Choose Something:</h3> 

     </div> 

     <div class="sb2-menu"> 

      <ul> 
       <li> 
        <a href="#">CCCCCCCCC</a> 
       </li> 

       <li> 
        <a href="#">CCCCCCCC</a> 
       </li> 

       <li> 
        <a href="#">CCCCCCCC</a> 
       </li> 
      </ul> 

     </div> 

    </div> 

    <div class="main-content"> 

     <div class="user-bar"> 

     </div> 

     <div class="content"> 

     </div> 

    </div> 

</div> 

Answer 1

.sidebar2であなたの<a>要素が<li>の内側にあるので<a>は、他の兄弟を持っていません。しかし、代わりに親の<li>に兄弟があります。要素がすでに要素が開いていることを意味し、クラスactive-sb1を、持っている場合

$('.sidebar2 a').click(function() { 
    var e = $(this); 
    e.addClass('active-sb2'); 
    e.parent().siblings().children().removeClass('active-sb2'); 
}); 

そして、あなたの最初の問題の

は、あなたがテストすることができ、あなたがクラスを削除した場合には： だから、あなたはこのような何かを試みることができます。

$('.sidebar1 > a').click(function() { 
    var e = $(this); 
    if (e.hasClass("active-sb1")) { 
     e.removeClass('active-sb1'); 
    } else { 
     e.addClass('active-sb1'); 
    } 
    e.siblings().removeClass('active-sb1'); 
}); 

Updated Fiddle link