需要帮助隐藏 ul 的 - JQuery答案

【问题标题】：Need help hiding ul's - JQuery需要帮助隐藏 ul 的 - JQuery
【发布时间】：2017-07-18 01:21:24
【问题描述】：

一段时间以来，我一直在研究多级下拉菜单。我遇到了麻烦，以我想要的方式显示它。单击下拉链接后，子菜单应直接显示在主菜单栏下方。问题是，如果我单击一个产品链接，然后单击另一个产品链接，则第二个链接对应的 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>

【问题讨论】：

您的.dropdown 课程是从哪里获得的？
这是 li 的类名，它们是 ul 子菜单的父级
那么，你想在 .dropdown 点击时隐藏/显示 li 吗？
我想隐藏/显示 .dropdown > ul。例如，如果我点击产品，就会出现产品下拉菜单。如果我在产品中单击单簧管，那么单簧管下拉列表将出现在产品下拉列表下方。但是，如果我在产品中单击萨克斯管，那么萨克斯管的下拉菜单会出现在单簧管的下拉菜单上。与萨克斯管取代单簧管的下拉列表相反。我希望这更有意义。谢谢
Trouble with JQuery for multi-level dropdown的可能重复

标签： jquery navbar dropdown

【解决方案1】：

试试这个

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

});

【讨论】：

好的，我试过了。产品的下拉菜单出现，但当您单击任何仪器链接时，它们的下拉菜单不会出现。

【解决方案2】：

您只需要切换兄弟姐妹。试试这个。

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

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

});

【讨论】：