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>
        .nav-menu {
            width: 200px;
            background-color: #f1f1f1;
            padding: 10px;
        }
        .nav-menu ul {
            list-style-type: none;
            padding: 0;
        }
        .nav-menu li {
            padding: 5px 0;
        }
        .nav-menu li a {
            text-decoration: none;
            color: #333;
        }
        .nav-menu .sub-menu {
            display: none;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <div class="nav-menu">
        <ul>
            <li><a href="#">电子产品</a>
                <ul class="sub-menu">
                    <li><a href="#">手机</a></li>
                    <li><a href="#">电脑</a></li>
                    <li><a href="#">平板</a></li>
                </ul>
            </li>
            <li><a href="#">家居用品</a>
                <ul class="sub-menu">
                    <li><a href="#">家具</a></li>
                    <li><a href="#">家电</a></li>
                </ul>
            </li>
            <li><a href="#">服装鞋帽</a>
                <ul class="sub-menu">
                    <li><a href="#">男装</a></li>
                    <li><a href="#">女装</a></li>
                    <li><a href="#">童装</a></li>
                </ul>
            </li>
        </ul>
    </div>

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

常见问题及解决方法

菜单展开和收起效果不明显：
- 原因：可能是 CSS 样式设置不当或 jQuery 动画效果未正确应用。
- 解决方法：检查 CSS 样式，确保 .sub-menu 的 display 属性初始值为 none，并在点击事件中使用 slideToggle() 方法。

菜单项点击后页面跳转：
- 原因：可能是 <a> 标签的 href 属性设置了跳转链接。
- 解决方法：在点击事件中使用 e.preventDefault() 阻止默认行为，或者将 <a> 标签替换为 <span> 标签。
子菜单展开后无法收起：
- 原因：可能是点击事件未正确绑定或事件冒泡导致。
- 解决方法：使用 e.stopPropagation() 阻止事件冒泡，确保点击事件只在当前元素上触发。