ulの隠すのに助けが必要です - JQuery

Question

私はしばらくの間、複数レベルのドロップダウンに取り組んできました。私は問題を抱えていて、私が望むように表示しています。ドロップダウンリンクをクリックすると、メインメニューバーのすぐ下にサブメニューが表示されます。問題は、1つの製品リンクをクリックし、別の製品リンクをクリックすると、2番目のリンクの対応するulが、最初のリンクを置き換えるのではなく、最初のリンクを上書きするということです。私はJQueryをとても使い慣れていて、ここからどこに行くのかは分かりません。これは私がこれまで行ってきたことです。

$('.dropdown a').on('click', function(e) { 
 
    e.preventDefault(); 
 
    ullist = 
 
    $(this).parent().children('ul:first'); 
 

 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.show { 
 
    display: block; 
 
} 
 

 
#main-bar { 
 
    list-style-type: none; 
 
    height: 50px; 
 
} 
 

 
#main-bar>li { 
 
    float: left; 
 
    border: 1px solid black; 
 
    padding: 15px 80px; 
 
} 
 

 
#main-bar>li>a { 
 
    text-decoration: none; 
 
} 
 

 
#product-bar { 
 
    position: absolute; 
 
    min-width: 1154px; 
 
    border: 1px solid black; 
 
    margin-left: -81px; 
 
    margin-top: 15px; 
 
    height: 50px; 
 
    list-style-type: none; 
 
    display: none; 
 
} 
 

 
#product-bar>li { 
 
    float: left; 
 
    padding: 15px 25px; 
 
} 
 

 
#product-bar>li>a { 
 
    text-decoration: none; 
 
} 
 

 
#clarinet-bar { 
 
    position: absolute; 
 
    min-width: 1154px; 
 
    border: 1px solid black; 
 
    margin-left: -71px; 
 
    margin-top: 17px; 
 
    height: 50px; 
 
    list-style-type: none; 
 
    display: none; 
 
} 
 

 
#clarinet-bar>li { 
 
    float: left; 
 
    padding: 15px 30px 0 35px; 
 
} 
 

 
#clarinet-bar>li>a { 
 
    text-decoration: none; 
 
} 
 

 
#saxophone-bar { 
 
    position: absolute; 
 
    min-width: 1154px; 
 
    border: 1px solid black; 
 
    margin-left: -183px; 
 
    margin-top: 17px; 
 
    height: 50px; 
 
    list-style-type: none; 
 
    display: none; 
 
} 
 

 
#saxophone-bar>li { 
 
    float: left; 
 
    padding: 15px 20px 0 16px; 
 
} 
 

 
#saxophone-bar>li>a { 
 
    text-decoration: none; 
 
} 
 

 
#flute-bar { 
 
    position: absolute; 
 
    min-width: 1154px; 
 
    border: 1px solid black; 
 
    margin-left: -314px; 
 
    margin-top: 17px; 
 
    height: 50px; 
 
    list-style-type: none; 
 
    display: none; 
 
} 
 

 
#flute-bar>li { 
 
    float: left; 
 
    padding: 15px 110px; 
 
} 
 

 
#flute-bar>li>a { 
 
    text-decoration: none; 
 
} 
 

 
#oboe-bar { 
 
    position: absolute; 
 
    min-width: 1154px; 
 
    border: 1px solid black; 
 
    margin-left: -372px; 
 
    margin-top: 17px; 
 
    height: 50px; 
 
    list-style-type: none; 
 
    display: none; 
 
} 
 

 
#oboe-bar>li { 
 
    float: left; 
 
    padding: 15px 75px; 
 
} 
 

 
#oboe-bar>li>a { 
 
    text-decoration: none; 
 
} 
 

 
#bassoon-bar { 
 
    position: absolute; 
 
    min-width: 1154px; 
 
    border: 1px solid black; 
 
    margin-left: -456px; 
 
    margin-top: 17px; 
 
    height: 50px; 
 
    list-style-type: none; 
 
    display: none; 
 
} 
 

 
#bassoon-bar>li { 
 
    float: left; 
 
    padding: 15px 70px 0 300px; 
 
} 
 

 
#bassoon-bar>li>a { 
 
    text-decoration: none; 
 
} 
 

 
#recorder-bar { 
 
    position: absolute; 
 
    min-width: 1154px; 
 
    border: 1px solid black; 
 
    margin-left: -560px; 
 
    margin-top: 17px; 
 
    height: 50px; 
 
    list-style-type: none; 
 
    display: none; 
 
} 
 

 
#recorder-bar>li { 
 
    float: left; 
 
    padding: 15px 38px; 
 
} 
 

 
#recorder-bar>li>a { 
 
    text-decoration: none; 
 
} 
 

 
#brass-bar { 
 
    position: absolute; 
 
    min-width: 1154px; 
 
    border: 1px solid black; 
 
    margin-left: -669px; 
 
    margin-top: 17px; 
 
    height: 50px; 
 
    list-style-type: none; 
 
    display: none; 
 
} 
 

 
#brass-bar>li { 
 
    float: left; 
 
    padding: 15px 19px 0 15px; 
 
} 
 

 
#brass-bar>li>a { 
 
    text-decoration: none; 
 
} 
 

 
#guitar-bar { 
 
    position: absolute; 
 
    min-width: 1154px; 
 
    border: 1px solid black; 
 
    margin-left: -755px; 
 
    margin-top: 17px; 
 
    height: 50px; 
 
    list-style-type: none; 
 
    display: none; 
 
} 
 

 
#guitar-bar>li { 
 
    float: left; 
 
    padding: 15px 90px; 
 
} 
 

 
#guitar-bar>li>a { 
 
    text-decoration: none; 
 
} 
 

 
#piano-bar { 
 
    position: absolute; 
 
    min-width: 1154px; 
 
    border: 1px solid black; 
 
    margin-left: -846px; 
 
    margin-top: 17px; 
 
    height: 50px; 
 
    list-style-type: none; 
 
    display: none; 
 
} 
 

 
#piano-bar>li { 
 
    float: left; 
 
    padding: 15px 70px 0 320px; 
 
} 
 

 
#piano-bar>li>a { 
 
    text-decoration: none; 
 
} 
 

 
#orchestral-bar { 
 
    position: absolute; 
 
    min-width: 1154px; 
 
    border: 1px solid black; 
 
    margin-left: -932px; 
 
    margin-top: 17px; 
 
    height: 50px; 
 
    list-style-type: none; 
 
    display: none; 
 
} 
 

 
#orchestral-bar>li { 
 
    float: left; 
 
    padding: 15px 125px 0 115px; 
 
} 
 

 
#piano-bar>li>a { 
 
    text-decoration: none; 
 
} 
 

 
#percussion-bar { 
 
    position: absolute; 
 
    min-width: 1154px; 
 
    border: 1px solid black; 
 
    margin-left: -1049px; 
 
    margin-top: 17px; 
 
    height: 50px; 
 
    list-style-type: none; 
 
    display: none; 
 
} 
 

 
#percussion-bar>li { 
 
    float: left; 
 
    padding: 15px 80px 0 70px; 
 
} 
 

 
#percussion-bar>li>a { 
 
    text-decoration: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul id="main-bar"> 
 
    <li class="dropdown"> 
 
     <a href="#">Product</a> 
 
     <!--sub-menu will hold all contents in dropdown --list items--> 
 
     <ul id="product-bar" class="sub-menu"> 
 
     <li class="dropdown"> 
 
      <a href="#" class="test">Clarinet</a> 
 
      <ul id="clarinet-bar" class="sub-menu"> 
 
      <li><a href="#">Bb Clarinet</a></li> 
 
      <li><a href="#">Bass Clarinet</a></li> 
 
      <li><a href="#">Eb Clarinet</a></li> 
 
      <li><a href="#">Alto Clarinet</a></li> 
 
      <li><a href="#">Contrabass Clarinet</a></li> 
 
      <li><a href="#">Contra-Alto Clarinet</a></li> 
 
      <li><a href="#">Basset Horn</a></li> 
 
      </ul> 
 
     </li> 
 

 
     <li class="dropdown"> 
 
      <a href="#">Saxophone</a> 
 
      <ul id="saxophone-bar" class="sub-menu"> 
 
      <li><a href="#">Alto Saxophone</a></li> 
 
      <li><a href="#">Tenor Saxophone</a></li> 
 
      <li><a href="#">Baritone Saxophone</a></li> 
 
      <li><a href="#">Soprano Saxophone</a></li> 
 
      <li><a href="#">Sopranino Saxophone</a></li> 
 
      <li><a href="#">Bass Saxophone</a></li> 
 
      <li><a href="#">Contrabass Saxophone</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"><a href="#">Flute</a> 
 
      <ul id="flute-bar" class="sub-menu"> 
 
      <li><a href="#">Flute</a></li> 
 
      <li><a href="#">Alto Flute</a></li> 
 
      <li><a href="#">Bass Flute</a></li> 
 
      <li><a href="#">Piccolo</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"><a href="#">Oboe</a> 
 
      <ul id="oboe-bar" class="sub-menu"> 
 
      <li><a href="#">Oboe</a></li> 
 
      <li><a href="#">Oboe D'amore</a></li> 
 
      <li><a href="#">English Horn</a></li> 
 
      <li><a href="#">Bass Oboe</a></li> 
 
      <li><a href="#">Piccolo Oboe</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"><a href="#">Bassoon</a> 
 
      <ul id="bassoon-bar" class="sub-menu"> 
 
      <li><a href="#">Bassoon</a></li> 
 
      <li><a href="#">Contrabassoon</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"><a href="#">Recorder</a> 
 
      <ul id="recorder-bar" class="sub-menu"> 
 
      <li><a href="#">Alto Recorder</a></li> 
 
      <li><a href="#">Tenor Recorder</a></li> 
 
      <li><a href="#">Soprano Recorder</a></li> 
 
      <li><a href="#">Bass Recorder</a></li> 
 
      <li><a href="#">Great Bass Recorder</a></li> 
 
      <li><a href="#">Piccolo Recorder</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"><a href="#">Brass</a> 
 
      <ul id="brass-bar" class="sub-menu"> 
 
      <li><a href="#">Trumpet</a></li> 
 
      <li><a href="#">Trombone</a></li> 
 
      <li><a href="#">Cornet</a></li> 
 
      <li><a href="#">French Horn</a></li> 
 
      <li><a href="#">Tuba</a></li> 
 
      <li><a href="#">Flugelhorn</a></li> 
 
      <li><a href="#">Euphonium</a></li> 
 
      <li><a href="#">Mellophone</a></li> 
 
      <li><a href="#">Alto Horn</a></li> 
 
      <li><a href="#">Tenor Horn</a></li> 
 
      <li><a href="#">Baritone Horn</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Guitar</a> 
 
      <ul id="guitar-bar" class="sub-menu"> 
 
      <li><a href="#">Electic Guitar</a></li> 
 
      <li><a href="#">Acoustic Guitar</a></li> 
 
      <li><a href="#">Classical Guitar</a></li> 
 
      <li><a href="#">Bass Guitar</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Piano</a> 
 
      <ul id="piano-bar" class="sub-menu"> 
 
      <li><a href="#">Piano</a></li> 
 
      <li><a href="#">Keyboard</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Orchestral</a> 
 
      <ul id="orchestral-bar" class="sub-menu"> 
 
      <li><a href="#">Violin</a></li> 
 
      <li><a href="#">Viola</a></li> 
 
      <li><a href="#">Cello</a></li> 
 
      <li><a href="#">Bass</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Percussion</a> 
 
      <ul id="percussion-bar" class="sub-menu"> 
 
      <li><a href="#">Keyboard Percussion</a></li> 
 
      <li><a href="#">Mallet Percussion</a></li> 
 
      <li><a href="#">Marching Percussion</a></li> 
 
      <li><a href="#">General Percussion</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <!--closes product-bar--> 
 
    </li> 
 
    <!--closes product list item that is holding all the products--> 
 
    <li><a href="#">Shop By Brands</a></li> 
 
    <li><a href="#">How to Order</a></li> 
 
    <li><a href="#">Quick Order</a></li> 
 
    <li><a href="#">About Us</a></li> 
 
    </ul> 
 
    <!--closes main-bar--> 
 
</nav>

Answer 1

あなただけの兄弟を切り替える必要があり、この

$('.dropdown a').on('click', function(e) { 

    if($(this).next('ul').is(':visible')) { 
     $(this).next('ul').hide(); 
    } else { 
     $('ul#main-bar').find('li.dropdown').each(function() { 
      $(this).find('ul:first').hide(); 
     }); 
     $(this).next('ul').show(); 
    } 

}); 

Answer 2

を試してみてください。これを試して。

$('.dropdown a').click(function(event){ 

    $(this).next().toggle(); 

});