javascript - ul li 子菜单使用 jquery 显示 onclick

Question

1. 我在使用导航菜单时遇到一些问题。我需要点击时显示导航菜单。当我单击任何包含子菜单的菜单时，它应该显示其子菜单，并保持显示状态，直到我再次单击此菜单关闭。

2. 此后，当我单击另一个包含子菜单的菜单时，它也应该显示其所有菜单列表，并将保持显示状态，直到我再次单击该菜单关闭。

3. 我需要当我单击第二个菜单列表(即第 2 点)时，前一个子菜单列表(即第 1 点)不应隐藏并保持与第二个子菜单列表一起显示，即两个子菜单列表菜单列表将同时显示。

4. 当我单击任意菜单列表之一时，它应该仅隐藏其子菜单列表，而不应隐藏其他子菜单列表。

感谢和问候。

<小时/>

对不起，我不是这个意思。

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

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;
}