jq制作树状菜单：jq事件、给标签增加class属性、动画的综合应用案例

陌一一

于 2022-11-18 11:23:06 发布

阅读量225

点赞数

分类专栏： web前端开发文章标签： html 前端 css jquery javascript

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127806759

版权

本文介绍了如何使用jQuery来创建一个树状菜单，包括允许同时展开多个子菜单和实现同一时间仅能展开一个子菜单的功能。通过添加CSS class和使用toggle方法动态控制子菜单的显示与隐藏，以及调整其他已展开菜单的状态。

摘要由CSDN通过智能技术生成

1、允许同时展开

思路：

先创建ul>li>ol>li标签骨架；
用before伪元素给li标签加上“+”；
当点击ul下亲li标签，加上class=active样式，ol标签展示出来；
用toggle方法，有属性的去掉，没有属性的加上；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,ol{
            list-style: none;
        }
        li::before{
            content: "+";
        }
        li.active::before{
            content: "-";
        }
        ol{
            display: none;
        }
    </style>
    <script src="./lib/jquery-3.6.1.js">&l