jquery二级下拉菜单

原创

mob649e8161738c 2023-08-21 06:54:38 ©著作权

文章标签 下拉菜单二级子菜单 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8161738c的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery二级下拉菜单详解

介绍

下拉菜单是网页开发中常见的UI组件之一。通过下拉菜单，用户可以从一系列选项中选择一个或多个选项。在本篇科普文章中，我们将详细介绍如何使用jQuery创建一个二级下拉菜单。

需求分析

在开始编写代码之前，我们需要明确我们的需求。我们希望创建一个二级下拉菜单，当用户在主菜单中选择一个选项时，会显示相应的子菜单。子菜单也是一个下拉菜单，用户可以在子菜单中选择一个选项。

实现步骤

创建HTML结构

首先，我们需要在HTML中创建所需的结构。代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>二级下拉菜单</title>
  <script src="
  <style>
    .menu {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }
    
    .menu ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
    }
    
    .menu li {
      position: relative;
    }
    
    .menu li:hover > ul {
      display: block;
    }
  </style>
</head>
<body>
  <div class="menu">
    <span>主菜单 1</span>
    <ul>
      <li>子菜单 1</li>
      <li>子菜单 2</li>
      <li>子菜单 3</li>
    </ul>
  </div>
  
  <div class="menu">
    <span>主菜单 2</span>
    <ul>
      <li>子菜单 4</li>
      <li>子菜单 5</li>
      <li>子菜单 6</li>
    </ul>
  </div>
  
  <script>
    // TODO: 在这里编写JavaScript代码
  </script>
</body>
</html>

在上面的代码中，我们创建了两个下拉菜单，每个下拉菜单包含一个主菜单和一个子菜单。子菜单默认是隐藏的，只有当用户将鼠标悬停在主菜单上时，子菜单才会显示出来。

编写JavaScript代码

现在，我们需要编写一些JavaScript代码来处理用户的交互。我们将使用jQuery库来简化代码编写。

首先，我们需要在文档加载完成后执行一些初始化代码。代码如下：

$(document).ready(function() {
  $('.menu').on('mouseenter', function() {
    $(this).find('ul').show();
  });
  
  $('.menu').on('mouseleave', function() {
    $(this).find('ul').hide();
  });
});

在上面的代码中，我们使用$(document).ready()来确保文档加载完成后再执行代码。接着，我们使用.on('mouseenter', ...)和.on('mouseleave', ...)来分别处理鼠标进入和离开主菜单的事件。当鼠标进入主菜单时，我们使用.show()来显示对应的子菜单；当鼠标离开主菜单时，我们使用.hide()来隐藏子菜单。