jquery 多级展开列表插件

原创

mob649e8169ec5f 2025-01-14 05:03:25 ©著作权

文章标签 jQuery 多级 HTML 文章分类 jQuery 前端开发

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

jQuery 多级展开列表插件简介

在现代网页设计中，多级展开列表是一种重要的用户界面元素。它允许用户以层级结构的形式查看和管理信息，使得页面更加整洁和易于导航。本文将介绍一个基于 jQuery 的多级展开列表插件，并提供示例代码。

什么是 jQuery 多级展开列表？

jQuery 多级展开列表插件是一个用于创建层级列表的工具。用户可以通过点击列表项来展开或收起子项，支持任意深度的嵌套结构。这种方式特别适合显示分类信息、文件目录等场景。

插件的基本结构

插件的结构通常包括一个 ul 元素作为根节点，里面包含若干个 li 元素代表列表项。每个 li 元素可以包含一个子 ul 元素，表示其下级列表。下面是一个基本的 HTML 结构示例：

<ul id="tree">
    <li>一级项 1
        <ul>
            <li>二级项 1-1
                <ul>
                    <li>三级项 1-1-1</li>
                    <li>三级项 1-1-2</li>
                </ul>
            </li>
            <li>二级项 1-2</li>
        </ul>
    </li>
    <li>一级项 2</li>
</ul>

jQuery 插件实现

1. 包含 jQuery 库

首先，需要在 HTML 文件中引入 jQuery 库：

<script src="

2. 编写插件代码

然后，我们编写一个简单的 jQuery 插件来处理点击事件，实现多级展开和收起功能：

$(document).ready(function () {
    $('#tree ul').hide(); // 初始时隐藏所有子项
    $('#tree li').click(function (e) {
        $(this).children('ul').slideToggle(); // 切换子项的显示状态
        e.stopPropagation(); // 阻止事件冒泡
    });
});

3. 完整示例

完整的 HTML 文件如下所示：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多级展开列表示例</title>
    <script src="
    <style>
        ul { list-style-type: none; }
        li { cursor: pointer; margin: 5px 0; }
    </style>
</head>
<body>
    <ul id="tree">
        <li>一级项 1
            <ul>
                <li>二级项 1-1
                    <ul>
                        <li>三级项 1-1-1</li>
                        <li>三级项 1-1-2</li>
                    </ul>
                </li>
                <li>二级项 1-2</li>
            </ul>
        </li>
        <li>一级项 2</li>
    </ul>

    <script>
    $(document).ready(function () {
        $('#tree ul').hide(); // 初始时隐藏所有子项
        $('#tree li').click(function (e) {
            $(this).children('ul').slideToggle(); // 切换子项的显示状态
            e.stopPropagation(); // 阻止事件冒泡
        });
    });
    </script>
</body>
</html>

类图示例

接下来，我们可以用类图来表示插件的结构：

classDiagram
    class Tree {
        +show()
        +hide()
        +toggle()
    }
    class Node {
        +addChild()
        +removeChild()
        +getChildren()
    }
    Tree --> Node : contains