需要帮助隐藏ul's - JQuery

时间：2017-07-18 01:21:25

标签： jquery navbar dropdown

我已经在一段时间内进行多级下拉了。我遇到了麻烦，按照我想要的方式显示它。单击下拉链接后，子菜单应直接显示在主菜单栏下方。问题是，如果我点击一个产品链接，然后点击另一个产品链接，第二个链接的相应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>

2 个答案:

答案 0 :(得分：0)

试试这个

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

});

答案 1 :(得分：0)

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

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

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

});
相关问题
最新问题