2022-06-11 jQuery案例:树状菜单(以树状结构展开和折叠的菜单和其子菜单)

原创

已于 2022-11-02 12:10:51 修改 · 649 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #jq #树状菜单

于 2022-06-11 07:58:06 首次发布

本文介绍如何使用jQuery创建具有展开和折叠功能的树状菜单。通过使用伪元素选择器添加"+"和"-"图标，并利用slideToggle()方法实现平滑的展开和折叠效果。点击菜单项时，其子菜单会动态显示或隐藏，同时可以设置只允许展开一个子菜单，其他子菜单将自动折叠。

思路

1.ul>li前的"+“,”-"号使用伪元素选择器::before{}添加,如在正式网页中,可以用iconfont图标,达到更好的视觉效果
2.点击展开和折叠不用display:block和none,而是用slideToggle(),效果更好
3.为ul>li绑定点击事件后,点击一个li就让其子元素ol展开和折叠,若只允许展开一个li,则让当前li的所有兄弟节点都向上折叠即可

代码

<style>
    ul,
    ol {
     
     
        list-style-type: none;
    }
    
    li::before {
     
     
        content: "+";
    }
    
    li.active::before {
     
     
        content: "-";
    }
    
    ol {
     
     
        display: none;
    }
</style>
<script src