jQuery如何实现折叠菜单

发布时间：2025-02-12 06:34:02 作者：小樊
来源：亿速云阅读：89

要使用jQuery实现折叠菜单，您可以使用jQuery的slideToggle()函数。以下是一个简单的示例，展示了如何使用jQuery创建一个折叠菜单：

首先，确保在HTML文件中包含jQuery库。将以下代码添加到HTML文件的<head>部分：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

创建一个包含菜单项的无序列表，并为每个菜单项添加一个点击事件监听器。将以下代码添加到HTML文件的<body>部分：

<ul class="menu">
  <li><a href="#" class="menu-item">菜单1</a></li>
  <li><a href="#" class="menu-item">菜单2</a>
    <ul class="submenu">
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
    </ul>
  </li>
  <li><a href="#" class="menu-item">菜单3</a></li>
</ul>

编写jQuery代码以处理菜单项的点击事件。将以下代码添加到HTML文件的<script>标签中：

$(document).ready(function() {
  $('.menu-item').click(function(e) {
    e.preventDefault(); // 阻止链接的默认行为
    $(this).siblings('.submenu').slideToggle(); // 折叠或展开子菜单
  });
});

现在，当您点击一个菜单项时，它的子菜单将折叠或展开。这就是如何使用jQuery实现一个简单的折叠菜单。您可以根据需要自定义样式和结构。

jQuery如何实现折叠菜单

相关阅读