本文链接：https://blog.csdn.net/DcTbnk/article/details/105828751

在这里插入图片描述

js代码文字解释过程

<script src="./jquery.min.js"></script>
<script>
    // 思路步骤
    // 给 ul中子级li,添加点击事件
    // 点击时: 当前li中 ol,下拉显示
    //         其他li中 ol,上卷隐藏

    $('ul>li').click(function(){
        $(this).toggleClass('active').children('ol').slideToggle().parent().siblings().removeClass('active').children('ol').slideUp();
        
        /*
        $(this)                  当前的,点击的 li标签
        .toggleClass('active')   切换class属性值 , 如果没有,就添加 active , 显示为 - 减号
                                                    如果有,就删除 active , 显示为 + 加号
        .children('ol')     找当前 li 中的子级标签 ol  children()  /  find()
        .slideToggle()      下拉显示和上卷隐藏的切换
        完成了,当前li的操作,要做其他li的操作
        .parent()    当前操作是 ol,找到ol的父级,li,也就是当前点击的li    
        .siblings()  找到当前点击li的兄弟标签
        .removeClass('active')    删除 class中的active,让 -减号 变 +加号
        .children('ol')   找到子级ol
        .slideUp();       上卷隐藏
        
        */
    })

    
    总结
        操作当前点击li
            1,定义class中active属性值
                如果有,就删除,如果没有就添加 ---  +加号 / -减号 的切换
                也可以通过if判断等实现,但是比较麻烦
                toggleClass()
            2,定义子级ol标签的显示属性
                如果是隐藏,就是显示,如果是显示就隐藏
                slideToggle()

        操作其他li
            1,删除class中active属性值
                如果之前是显示状态, 把 -减号 变 +加号
                removeClass()
            2,定义子级ol标签的显示属性
                一律都是上卷隐藏
                如果之前是隐藏,就没有操作效果
                如果之前是显示,就会上卷隐藏
                slideUp()
    
</script>