Question

使用导航菜单时遇到问题。我需要我的导航菜单才能点击显示。当我点击任何带有子菜单的菜单时，它应显示其子菜单，并保持显示，直到我再次点击此菜单关闭。
此后当我点击另一个带有子菜单的菜单时，它还应显示其所有菜单列表，并将一直显示，直到我再次点击此菜单关闭。
< / LI>
我需要当我点击第二个菜单列表即（点号2）时，前一个子菜单列表（即点号1）不应该隐藏并保持显示第二个子菜单列表，即两个子菜单菜单列表将同时显示。
当我点击其中一个菜单列表时，它应该只隐藏它的子菜单列表，不应该隐藏其他子菜单列表。

谢谢和问候。

对不起，我的意思并非如此。

这是我正在使用的代码： -

Jquery代码： -

<script>
$(document).ready(function() {

      $("#nav li").click(function(){

         $(this).addClass("selected"); 

      }); 


      $("#nav li").click(function(){

        $("ul.sub-menu").toggleClass("open");

      }); 


      $("#nav li ul li").click(function(){

      $("ul.sub-menu").toggleClass("open"); 

      });

});

</script>

Answer 1

FIDDLE FOR TOGGLE MENU

所以，这是代码：

HTML：

<div id="headermenu" class="click-nav">
  <ul class="no-js">
    <li id=""><a href="#">menu1</a></li>
    <li id=""><a class="have-second-level-menu" href="#">menu2</a>
      <ul class="sub-menu">
        <li ><a class="have-third-level-menu" href="#">submenu1></a>
          <ul>
            <li><a href="#">submenu.1 </a></li>
            <li><a href="#">submenu.2</a></li>
            <li><a href="#">submenu.3</a></li>
            <li><a href="#">submenu.4</a></li>
          </ul>
        </li>
        <li><a href="#">submenu4</a></li>
        <li ><a class="have-third-level-menu" href="#">submenu1</a></li>
        <li><a href="#">submenu7</a></li>
      </ul>
    </li>
  </ul>
</div>

以下是Jquery：

$(function () {
  $('.click-nav .no-js .have-second-level-menu').click(function(e) {
     $(this).closest('li').find('.sub-menu').slideToggle(200);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });

  $('.have-third-level-menu').click(function(e) {
      $(this).closest('li').find('ul').slideToggle(200);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
});

CSS：

#headermenu {
    width: 90%;
    height: 20%;
    margin-right: 5%;
    margin-left: 5%;
    margin-bottom: .5%;
}
#headermenu ul ul {
    display: none;
}
/*#headermenu ul li:hover > ul {
        display: block !important;
    }*/
#headermenu ul {
    padding: 0;
    margin: 0;
    white-space: nowrap;
    list-style: none;
    position: relative;
    display: inline-table;
}
#headermenu ul li {
    width: 100px;
    height: 45px;
    float: left;
    left: 0;
    text-decoration: none;
    text-align: center;
    font-family: century gothic;
    background-color: #fef3e2;
}
#headermenu ul li:hover {
    background: #feaa38;
}
#headermenu ul li:hover a {
    color: #ffffff;
}
#headermenu ul li a {
    color: #feaa38;
    display: block;
    text-decoration: none;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#headermenu ul ul {
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
}
#headermenu ul ul li {
    float: none;
    background: #b0c7bd;
    position: relative;
}
#headermenu ul ul li:hover {
    background: #aea7a0;
}
#headermenu ul ul li a {
    color: #ffffff;
}
#headermenu ul ul li a:hover {
    background: #aea7a0;
}
#headermenu ul ul ul {
    position: absolute;
    left: 100%;
    top: 0;
}
#headermenu:active ul ul {
    display: none;
}

ul li子菜单使用jquery显示onclick

1 个答案: