JQuery的多级下拉列表问题

时间：2017-07-16 12:58:53

标签： jquery html css drop-down-menu

我一直在为一个应该有多个级别的网站的导航菜单工作。我在点击时出现正确的下拉菜单时遇到了JQuery问题。我在网页中使用Javascript和Jquery是新手，所以我很感激我能得到的任何帮助。这是我到目前为止所做的。

＆＃13;
＆＃13; 
$('.dropdown').on('click', function() {
  $(this).children('.sub-menu').toggleClass('show');
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

这是一个工作演示，虽然CSS需要修复。这是一个简单的JQuery代码，而不是toggleClass()，我们需要使用children，因为有嵌套菜单：

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

答案 1 :(得分：0)

您遇到问题的主要原因是子菜单标记不仅具有为您的jQuery提供的类.sub-menu，而且还具有ID，并且这些ID的CSS规则包含display: none它有更多的特殊性。因此，为了覆盖您可以在!important类上使用.show（这不是那么好）...... 

.show {
  display: block !important;
}

...或（更好）从这些ID（display: block，saxophone-bar等的CSS规则中删除flute-bar。

相关问题
最新问题