JS树形折叠菜单代码

Html

Css

Js

    

        
一级标题
        

            
二级标题
        
    
    

        
一级标题
        

            
二级标题
            
二级标题
            
二级标题
        
    
    

        
一级标题
        

            
二级标题
            
二级标题
        
    

ul,li { margin:0px; padding:0px; list-style:none; } a { text-decoration:none; color:#222; } .tree { width:300px; } .tree .option { width:100%; cursor:pointer; } .tree .option p span { font-weight:bold; } .tree .option.active p span { color:#09f; } .tree .option p { box-sizing:border-box; width:100%; font-size:16px; line-height:46px; color:#222222; display:flex; justify-content:space-between; padding-right:34px; } .tree .option p .iconfont { font-size:12px; } .tree .option .tree-two { width:100%; height:0px; overflow:hidden; } .tree .option .tree-two .item { width:100%; } .tree .option .tree-two .item a { box-sizing:border-box; padding-left:2em; display:inline-block; width:100%; height:36px; line-height:36px; font-size:16px; } .tree .option .tree-two .item.active a { background-color:#E6F7FF; border-right:4px solid #09f; color:#09f; }

var opts_ = $('.tree .option'); for (let i = 0; i < opts_.length; i++) { opts_.eq(i).click(() => { if (opts_.eq(i).children('.tree-two').css('height') == '0px') { let items = opts_.eq(i).children('.tree-two').children('.item'); let h = 0; for (let j = 0; j < items.length; j++) { h += items.eq(j).height() // 点击二级列表添加样式 items.eq(j).click((event) => { items.eq(j).addClass('active').siblings().removeClass('active') event.stopPropagation(); }) } // 展示当前二级列表 opts_.eq(i).children('.tree-two').animate({ height: h }, 200) opts_.eq(i) .children('.tree-two') .children('.item').eq(0) .addClass('active') .siblings() .removeClass('active') // 隐藏其他二级列表 opts_.eq(i).siblings().children('.tree-two').animate({ height: '0px' }, 200) // 设置当前样式 opts_.eq(i).addClass('active').siblings().removeClass('active') // 修改箭头 opts_.eq(i).children('p').children('.iconfont').removeClass('icon-xia').addClass('icon-shang') opts_.eq(i).siblings().children('p').children('.iconfont').removeClass('icon-shang').addClass('icon-xia') } else { // 展示当前二级列表 opts_.eq(i).children('.tree-two').animate({ height: '0px' }, 300) // 修改箭头 opts_.eq(i).children('p').children('.iconfont').removeClass('icon-shang').addClass('icon-xia') } }) }

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

树形组件

## 实现思路

- 1.以 **ul > li > ul > li** 的思路实现

- 2.第一个 li 指的是一级标题

- 3.第二个 ul 指的是二级标题的容器

- 4.第二个 ul 中的 li 指的是二级标题的内容

## 动画实现思路

```以高度0到auto实现过渡```

- 1.首先遍历所有的一级标题

- 2.点击一级标题的时候判断二级标题容器高度

- 3.如果为0说明二级标题容器未显示

    - 3.1获取当前点击的一级标题内的二级标题得到数组

    - 3.2将所有二级标题的高度相加赋值给h

    - 3.3点击二级标题的时候给当前二级标题添加active类表示激活状态，active样式在css中定义，兄弟元素移除active类，**阻止冒泡**

    - 3.4设置当前二级标题容器的高度为h，使用animate方法添加动画

    - 3.5给当前一级标题的第一个二级标题添加active类并且移除兄弟元素的active类

    - 3.6隐藏兄弟元素的二级标题容器(设置高度为0)

    - 3.7给当前一级标题添加active类并移除兄弟元素的active类

- 4.否则使用animate方法设置当前一级标题的二级标题容器高度为0

## 特别说明

- 1.[个人博客](http://xueshuai.top)

- 2.只提供思路,如果想用的话尽量下载下来自己看看

- 3.随时可能会废弃,有时间会更新

- 4.代码中的iconfont类是使用了iconfont字体图标，这里没办法引入所以没显示