jquery前端导航一二级菜单折叠打开

原创

mob649e815f494b 2025-01-04 04:56:02 ©著作权

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

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

jQuery前端导航一二级菜单折叠打开的实现

在现代网页设计中，导航菜单是用户体验的关键组件之一。一个好的导航菜单不仅能够提升用户体验，同时也能够帮助用户更快找到他们需要的信息。本文将以“jQuery前端导航一二级菜单折叠打开”为主题，带您逐步了解如何实现这一功能。本文包括代码示例、状态图以及一些最佳实践。

第一步：准备HTML结构

首先，我们需要构建一个简单的HTML结构。这将是我们的导航菜单，包含一级菜单和对应的二级菜单。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery导航菜单示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav id="menu">
        <ul>
            <li>
                <a rel="nofollow" href="#">一级菜单1</a>
                <ul class="submenu">
                    <li><a rel="nofollow" href="#">二级菜单1-1</a></li>
                    <li><a rel="nofollow" href="#">二级菜单1-2</a></li>
                </ul>
            </li>
            <li>
                <a rel="nofollow" href="#">一级菜单2</a>
                <ul class="submenu">
                    <li><a rel="nofollow" href="#">二级菜单2-1</a></li>
                    <li><a rel="nofollow" href="#">二级菜单2-2</a></li>
                </ul>
            </li>
            <li>
                <a rel="nofollow" href="#">一级菜单3</a>
                <ul class="submenu">
                    <li><a rel="nofollow" href="#">二级菜单3-1</a></li>
                    <li><a rel="nofollow" href="#">二级菜单3-2</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <script src="
    <script src="script.js"></script>
</body>
</html>

代码解析

我们使用了标准的<ul>和<li>标签来构建菜单。
每个一级菜单下都有一个子菜单<ul class="submenu">，用于放置二级菜单项。
jQuery脚本会在末尾引入，这样可以确保DOM元素在脚本执行前加载完毕。

第二步：编写样式

为了让我们的菜单看起来更加美观，我们需要一些CSS样式。以下是一个基本的样式设置：

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

nav {
    width: 200px;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav > ul > li {
    border: 1px solid #ccc;
}

nav > ul > li > a {
    display: block;
    padding: 10px;
    text-decoration: none;
    background: #f4f4f4;
    color: #333;
}

nav > ul > li > a:hover {
    background: #ddd;
}

.submenu {
    display: none; /* 默认隐藏二级菜单 */
}

.submenu li a {
    background: #e2e2e2;
}

.submenu li a:hover {
    background: #ccc;
}

样式说明

通过使用基本的CSS，我们可以设置菜单的宽度、背景色、边框和悬停效果。
二级菜单通过display: none;默认隐藏，待点击一级菜单时再显示出来。

第三步：实现折叠和展开功能

接下来，我们需要用jQuery来实现菜单的折叠和展开功能。以下是相应的JavaScript代码：

// script.js
$(document).ready(function() {
    $('#menu > ul > li > a').click(function(event) {
        event.preventDefault(); // 阻止链接的默认行为
        $(this).siblings('.submenu').slideToggle(); // 切换子菜单的显示
    });
});

代码讲解

使用$(document).ready(function() { ... })确保DOM完全加载后再执行代码。
通过click事件侦听器，我们可以捕捉每个一级菜单的点击事件，并使用slideToggle()方法来切换子菜单的显示状态。
event.preventDefault();用于阻止链接的跳转行为，以便用户可以在页面上正常浏览而不离开。

状态图

为了更好地理解我们实现的逻辑，可以使用状态图来描述菜单的状态变化。以下是用mermaid语法表示的状态图：

stateDiagram
    [*] --> 一级菜单关闭
    一级菜单关闭 --> 一级菜单打开 : 点击一级菜单
    一级菜单打开 --> 一级菜单关闭 : 点击一级菜单
    一级菜单打开 --> 二级菜单打开 : 点击二级菜单
    二级菜单打开 --> 一级菜单打开 : 点击一级菜单