时间戳

首页 > 解决方案 > Jquery切换类自动展开和折叠

javascript - Jquery切换类自动展开和折叠

问题描述

我试图进行下拉导航。我在 CSS 中使用了这段代码，并尝试切换活动类以使 ul 下拉。

header nav ul li ul{
    position: absolute;
    left: 0;
    background: #333;
    display: none;
}

header nav ul li.active ul{
    display: block;
}

我使用了这个 J-query 代码来切换类。

$('ul li').click(function(){
    
    $(this).toggleClass('active');
})

但问题是当我单击 li 到下拉菜单时，它会展开，然后一键自动折叠。我想单击一下，然后在我再次单击时折叠它。但它会一键自动展开和折叠。请帮助我，我是编码新手。

标签： javascriptjquerycss

解决方案

可能你必须调整你的 Html 代码。

代码片段供您参考。

希望这可以帮助。

$('ul li').click(function() {
  $(this).toggleClass('active');
})
ul li ul {
  display: none;
  background: #fff;
  list-style-type: none;
  padding: 5px;
}

ul li.active ul {
  display: block;
}

.menu-item {
  max-width: 130px;
}

ul.menu-item li {
  cursor: pointer;
  padding: 5px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <ul class="menu-item">
    <li>Home</li>
    <li>Abous Us
      <ul>
        <li>Lorem</li>
        <li>Lorem1</li>
        <li>Lorem2</li>
      </ul>
    </li>
    <li>What We Do
      <ul>
        <li>Web Development</li>
        <li>IoT</li>
        <li>AI</li>
      </ul>
    </li>
  </ul>
</body>

</html>

推荐阅读