JS-案例-三级菜单（可展开、合并）

最新推荐文章于 2021-10-20 12:54:17 发布

原创

最新推荐文章于 2021-10-20 12:54:17 发布 · 3.7k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#JS #三级菜单 #点击事件 #展开、合并

这篇博客介绍如何运用递归生成HTML结构来创建三级菜单，并通过添加点击事件来实现在JavaScript中实现菜单的展开和合并效果。两种方法包括监听所有li元素以及使用事件委托在ul上进行高效操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运用递归写ul>li三级菜单的结构，构建点击事件，触发合并，展开的效果

第一种方法

侦听所有li，为防止li向上冒泡影响ul，要加e.stopPropagation( );阻止冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var list=[
            {name:"第一章",value:[
                {name:"第一单元",value:["第一课","第二课","第三课","第四课"]},
                {name:"第二单元",value:["第一课","第二课","第三课","第四课"]},
                {name:"第三单元",value:["第一课","第二课","第三课","第四课"]},
                {name:"第四单元",value:["第一课","第二课","第三课","第四课"]}
                ]},
            {name:"第二章",value:[
                {name:"第一单元",value:["第一课","第二课","第三课","第四课"]},
                {name:"第二单元",value:["第一课","第二课","第三课","第四课"]},
                {name:"第三单元",value:["第一课","第二课","第三课","第四课"]},
                {name:"第四单元",value:["第一课","第二课","第三课","第四课"]}
                ]},
            {name:"第三章",value:[
                {name:"第一单元"