jquery 竖型菜单样式

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。竖型菜单（Vertical Menu）是一种常见的网页导航方式，通常以垂直列表的形式展示菜单项。

类型

竖型菜单可以分为以下几种类型：

简单列表式：纯文本的垂直列表。
图标+文本：每个菜单项包含一个图标和一段文本。
下拉式：点击某个菜单项后，展开子菜单项。
多级菜单：包含多级子菜单的复杂结构。

应用场景

竖型菜单广泛应用于各种网页应用中，特别是在需要展示大量导航选项的场景，如：

管理后台
电子商务网站
企业官网

示例代码

以下是一个简单的 jQuery 竖型菜单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Menu</title>
    <style>
        .menu {
            list-style: none;
            padding: 0;
            width: 200px;
        }
        .menu li {
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }
        .menu li:last-child {
            border-bottom: none;
        }
        .submenu {
            display: none;
            list-style: none;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li>Home</li>
        <li>About</li>
        <li>Services
            <ul class="submenu">
                <li>Web Development</li>
                <li>Mobile Development</li>
            </ul>
        </li>
        <li>Contact</li>
    </ul>

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

遇到的问题及解决方法

问题：菜单展开和收起动画效果不明显

原因：可能是由于 CSS 样式设置不当或 jQuery 动画效果未正确应用。

解决方法：

确保 CSS 样式中 display 属性设置为 none，以便初始状态下子菜单是隐藏的。
使用 jQuery 的 slideToggle() 方法来实现展开和收起动画效果。

$(document).ready(function() {
    $('.menu > li').click(function(e) {
        e.stopPropagation();
        $(this).find('.submenu').slideToggle();
    });
});

问题：点击菜单项后，子菜单未正确展开或收起

原因：可能是由于事件冒泡或选择器使用不当。

解决方法：

使用 e.stopPropagation() 阻止事件冒泡。
确保选择器正确，能够准确选中需要展开或收起的子菜单。

$(document).ready(function() {
    $('.menu > li').click(function(e) {
        e.stopPropagation();
        $(this).find('.submenu').slideToggle();
    });
});

通过以上方法，可以有效解决竖型菜单在 jQuery 中的常见问题，确保菜单的正常展开和收起效果。