JQuery 的多级下拉问题答案

【问题标题】：Trouble with JQuery for multi-level dropdownJQuery 的多级下拉问题
【发布时间】：2017-07-16 12:58:52
【问题描述】：

我一直在为一个应该有多个级别的网站设计导航菜单。在点击时出现正确的下拉菜单方面，我遇到了 JQuery 的问题。我是在网页中使用 Javascript 和 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>

【问题讨论】：

$(this).find('.sub-menu').get(0)

标签： jquery html css drop-down-menu

【解决方案1】：

这是一个工作演示，但 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>

【讨论】：

感谢您迄今为止的帮助！我添加了您提供的 JQuery 代码，理论上它按我想要的方式工作。当我点击产品中的一个工具时，下拉菜单直接出现在产品栏的下方。但是现在看来，如果我单击一个仪器，然后单击第二个仪器，则第二个仪器的下拉列表会与第一个仪器的下拉列表重叠，而不是替换它。对于这样的事情，最好为这个想要的效果创建一个单独的函数还是添加到现有的函数中？

【解决方案2】：

你的问题的主要原因是子菜单标签不仅有 .sub-menu 类，它是为你的 jQuery 解决的，而且它们还有 ID，这些 ID 的 CSS 规则包含 display: none，它更具体那一堂课。所以为了覆盖你可以在你的.show类上使用!important（这不是那么好）......

.show {
  display: block !important;
}

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

【讨论】：