jQuery实现二级菜单鼠标无法进入二级菜单

原创

mob64ca12f15103 2024-09-22 07:24:07 ©著作权

文章标签 二级菜单 HTML jQuery 文章分类 jQuery 前端开发

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

jQuery实现二级菜单鼠标无法进入二级菜单

在网页设计中，二级菜单（或下拉菜单）是一种常见的交互形式。实现一个二级菜单时，常常会遇到用户在鼠标悬停时不小心进入二级菜单的场景。为了避免这种情况，让我们来学习如何使用 jQuery 实现“鼠标无法进入二级菜单”的效果。

流程步骤

我们可以将实现此功能的流程划分为以下几个步骤，并用表格展示：

步骤	描述
1	创建基本的HTML结构
2	添加CSS样式进行布局和美化
3	使用jQuery实现鼠标悬停事件
4	处理鼠标离开事件

flowchart TD
    A[开始] --> B[创建基本的HTML结构]
    B --> C[添加CSS样式]
    C --> D[使用jQuery实现鼠标悬停事件]
    D --> E[处理鼠标离开事件]
    E --> F[结束]

步骤详细说明

步骤1：创建基本的HTML结构

首先，我们需要一个简单的HTML结构来展示一个二级菜单。以下是一个基本的示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级菜单示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul class="menu">
        <li>菜单1
            <ul class="submenu">
                <li>子菜单1</li>
                <li>子菜单2</li>
            </ul>
        </li>
        <li>菜单2</li>
    </ul>
    <script src="
    <script src="script.js"></script>
</body>
</html>

这段代码创建了一个含有二级菜单的基本HTML结构。

步骤2：添加CSS样式进行布局和美化

接下来，我们需要一些CSS样式来美化菜单并隐藏二级菜单。以下是CSS样式的示例：

/* style.css */
.menu {
    list-style: none; /* 去掉默认的列表样式 */
    padding: 0;
}

.menu > li {
    position: relative; /* 使submenu相对于这个li定位 */
    display: inline-block; /* 使菜单水平展示 */
    margin-right: 20px;
}

.submenu {
    display: none; /* 默认隐藏子菜单 */
    position: absolute; /* 绝对定位 */
    top: 100%; /* 在菜单下方显示 */
    left: 0;
    background-color: #fff; /* 背景颜色 */
    border: 1px solid #ccc;
}

.submenu li {
    display: block; /* 垂直展示子菜单项 */
}

这一部分代码提供了一个简洁美观的菜单布局。

步骤3：使用jQuery实现鼠标悬停事件

该步骤使用 jQuery 来处理鼠标悬停事件，让二级菜单在鼠标悬停时显示出来。

// script.js
$(document).ready(function() {
    $('.menu > li').hover(
        function() { // 鼠标进入时
            $(this).children('.submenu').stop(true, true).fadeIn(200); // 显示子菜单
        }, 
        function() { // 鼠标离开时
            $(this).children('.submenu').stop(true, true).fadeOut(200); // 隐藏子菜单
        }
    );
});

这段代码让二级菜单在鼠标悬停时出现，同时在鼠标移开时消失。

步骤4：处理鼠标离开事件

在之前的步骤中，我们已经实现了鼠标离开主菜单时，子菜单会直接隐藏。同时，为了避免在鼠标快速移动时直接进入子菜单，可以将子菜单的显示与隐藏时间延迟处理（如使用setTimeout不会太复杂）。以下是一个简单的实现：

// 这里省略了前面的代码
let hideTimeout;

$('.menu > li').hover(
    function() {
        clearTimeout(hideTimeout);
        $(this).children('.submenu').stop(true, true).fadeIn(200);
    },
    function() {
        const $submenu = $(this).children('.submenu');
        hideTimeout = setTimeout(function() { // 设置延迟
            $submenu.stop(true, true).fadeOut(200);
        }, 300); // 延迟300ms
    }
);