需要幫助藏匿UL的 - JQuery的

我已經工作了一段時間了多層次的下拉菜單了。我遇到麻煩了，以我想要的方式顯示它。點擊下拉鍊接後，子菜單應直接顯示在主菜單欄的下方。問題是，如果我點擊一個產品鏈接，然後點擊其他商品鏈接，第二鏈接的相應的UL只是懸停，而不是取代它的第一個。我對JQuery非常陌生，不確定從哪裏出發。這是迄今爲止我所擁有的。需要幫助藏匿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>

來源

2017-07-18 agriffin

你從哪裏得到你的'.dropdown'類？ –

它的類名的李時珍是UL子菜單 – agriffin

所以，你要隱藏/顯示李肇星對.dropdown點擊的父母呢？ –

試試這個

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

});

來源

2017-07-18 01:53:38

好吧，我試了一下。產品的下拉菜單出現，但是當您點擊任何一個樂器鏈接時，它們的下拉菜單不會出現。 – agriffin

你只需要切換的兄弟姐妹。嘗試這個。

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

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

});

來源

2017-07-18 03:01:18

需要幫助藏匿UL的 - JQuery的

回答

相關問題