複数レベルドロップダウンのJQueryに問題があります

私は、複数のレベルを持つ必要があるウェブサイトのナビゲーションメニューで作業しています。私はJQueryに問題があり、クリックで正しいドロップダウンが現れるという点で問題があります。私はWebページでJavascriptとJqueryを使用するのが初めてであるので、私が得ることができるすべてのヘルプに感謝します。これは私がこれまで持っていたものです。ここで複数レベルドロップダウンのJQueryに問題があります

$('.dropdown').on('click', function() { 
 
    $(this).children('.sub-menu').toggleClass('show'); 
 
});

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> 
 
     <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-16 agriffin

'$（this）.find（ 'サブメニュー'）。get（0）' – pirs

CSSを修正する必要があるものの、作業のデモです。それは、私たちは、ネストされたメニューがあるとしてchildrenを使用するために必要な代わりにtoggleClass()の、シンプルなjQueryのコードだった：

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

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> 
 
     <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-16 13:05:45

これまでのご協力ありがとうございました！あなたが提供したJQueryコードを追加しました。理論的には、私が望むように動作します。製品内の楽器をクリックすると、プロダクトバーのすぐ下にドロップダウンが表示されます。しかし、今度は、1つの楽器をクリックしてから2番目の楽器をクリックすると、2番目の楽器のドロップダウンが1番目の楽器のドロップダウンと重なっているように見えます。このような場合は、この目的のエフェクト用に別のファンクションを作成するか、既存のファンクションに追加するのが最善でしょうか？ – agriffin

あなたの問題の主な理由は、サブメニューのタグだけでなく、持っているということですクラス.sub-menuはあなたのjQueryに対処されていますが、IDも持っています。これらのIDのCSSルールには、より具体性の高いdisplay: noneが含まれています。だから、

.show { 
    display: block !important; 
}

...または（より良い）...あなたはどちらかが（良いことではありません）あなたの.showクラスに!importantを使用することができることを上書きするために、これらのIDのためのCSSルールからdisplay: blockを削除（saxophone-bar、flute-barなど。

出典

2017-07-16 13:11:49 Johannes

複数レベルドロップダウンのJQueryに問題があります

答えて

関連する問題