Trouble with JQuery for multi-level dropdown

2019-08-16 02:15发布

站内文章 / jQuery
17 0 0

问题:

I've been working on the nav menu for a website that should have multiple levels. I'm having trouble with the JQuery in terms of having the correct drop downs appear on click. I'm new to using Javascript and Jquery in webpages so I appreciate any help I can get. This is what I have so far.

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

回答1:

Here is a working demo, though CSS needs to be fixed. It was a simple JQuery code, instead of toggleClass(), we needed to use children as there are nested menus: 

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



回答2:

The main reason for your problem is that the submenu tags not only have the class .sub-menu which is addressed you your jQuery, but they also have IDs, and the CSS rules for these IDs contain display: none which has more specifity that a class. So in order to overwrite that you either can use !important on your .show class (which is not that good)…

.show {
  display: block !important;
}

…or (better) remove the display: block from the CSS rules for those IDs (saxophone-bar , flute-bar etc.)



标签： jquery html css drop-down-menu
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~