UL li 子菜单使用 jQuery 在单击时显示

ul li submenu show onclick using jquery

本文关键字：单击 显示 jQuery li 菜单 UL      更新时间：2023-09-26

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

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

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

  4. 当我单击其中一个菜单列表时，它应该只隐藏它的子菜单列表，而不应该隐藏其他子菜单列表。

谢谢和问候。

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

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

J查询代码：-

<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>
拨动

菜单的小提琴

所以，这是代码：

.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;
}
相关文章：