jQuery实现点击一级菜单显示/隐藏二级菜单功能

jQuery实现点击一级菜单显示/隐藏二级菜单

本文将介绍如何使用jQuery实现点击一级菜单时，根据二级菜单的当前状态，动态显示或隐藏对应二级菜单的功能。

功能需求：

当点击一级菜单时，需要判断对应的二级菜单的当前状态。如果二级菜单处于显示状态，则隐藏；如果二级菜单处于隐藏状态，则显示。

jQuery代码示例：

$(document).ready(function() {
  // 给一级菜单绑定点击事件
  $('.一级菜单').click(function() {
    // 获取当前点击的一级菜单对应的二级菜单
    var $submenu = $(this).find('.二级菜单');

    // 判断对应的二级菜单的当前显示状态
    if ($submenu.is(':visible')) { // 如果二级菜单处于显示状态
      $submenu.hide(); // 隐藏二级菜单
    } else { // 如果二级菜单处于隐藏状态
      $submenu.show(); // 显示二级菜单
    }
  });
});

代码说明：

$(document).ready(function() { ... });: 确保在DOM加载完成后执行代码。
$('.一级菜单').click(function() { ... });: 给所有类名为'一级菜单'的元素绑定点击事件。
var $submenu = $(this).find('.二级菜单');: 获取当前点击的一级菜单对应的二级菜单元素。
if ($submenu.is(':visible')) { ... } else { ... }: 判断二级菜单是否可见，并根据状态执行hide()或show()方法。

使用方法：

将代码中的.一级菜单和.二级菜单替换为您实际使用的 HTML 元素的类名或选择器。
将代码添加到您的网页中，并在需要的地方引入jQuery库。

示例：

假设您的HTML结构如下：

<ul>
  <li class='一级菜单'>菜单一
    <ul class='二级菜单'>
      <li>二级菜单项1</li>
      <li>二级菜单项2</li>
    </ul>
  </li>
  <li class='一级菜单'>菜单二
    <ul class='二级菜单'>
      <li>二级菜单项1</li>
      <li>二级菜单项2</li>
    </ul>
  </li>
</ul>

将上述代码添加到您的网页中，即可实现点击一级菜单显示或隐藏对应二级菜单的功能。