jquery 二级横向菜单

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。二级横向菜单是指在一个主菜单项下，有多个子菜单项，并且这些子菜单项横向排列。

类型

静态菜单：菜单项在页面加载时就已经确定，不会根据用户的操作动态变化。
动态菜单：菜单项会根据用户的操作（如点击、悬停等）动态显示或隐藏。

应用场景

二级横向菜单常用于网站的导航栏，特别是在内容丰富、分类较多的网站中，可以帮助用户更方便地浏览和定位内容。

示例代码

以下是一个简单的 jQuery 二级横向菜单的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 二级横向菜单</title>
    <style>
        .menu {
            display: flex;
            list-style: none;
            padding: 0;
        }
        .menu li {
            position: relative;
        }
        .submenu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 0;
        }
        .menu li:hover .submenu {
            display: block;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li>菜单1
            <ul class="submenu">
                <li>子菜单1-1</li>
                <li>子菜单1-2</li>
            </ul>
        </li>
        <li>菜单2
            <ul class="submenu">
                <li>子菜单2-1</li>
                <li>子菜单2-2</li>
            </ul>
        </li>
    </ul>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.menu li').hover(
                function() {
                    $(this).find('.submenu').show();
                },
                function() {
                    $(this).find('.submenu').hide();
                }
            );
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：子菜单在悬停时显示，但在鼠标移开后不隐藏

原因：可能是由于事件绑定不正确或 CSS 样式问题导致的。

解决方法：

检查事件绑定：确保使用 hover 方法正确绑定了鼠标悬停和移开的事件。
检查 CSS 样式：确保子菜单的 display 属性在默认情况下是 none，并且在悬停时能够正确显示。

$(document).ready(function() {
    $('.menu li').hover(
        function() {
            $(this).find('.submenu').show();
        },
        function() {
            $(this).find('.submenu').hide();
        }
    );
});

通过以上方法，可以确保二级横向菜单在用户悬停时显示子菜单，并在鼠标移开后隐藏子菜单。

页面内容是否对你有帮助？

有帮助

没帮助