LayUI框架，tree组件，实现展开全部和折叠全部的功能

最新推荐文章于 2025-04-15 09:15:49 发布

骑着蚂蚁追大象

最新推荐文章于 2025-04-15 09:15:49 发布

阅读量1k

点赞数 2

文章标签： layui

本文链接：https://blog.youkuaiyun.com/qq_36176250/article/details/138443914

版权

文章讲述了如何通过JavaScript模拟点击事件，操作HTML中的特定图标类（layui-icon-addition和layui-icon-subtraction），实现动态菜单树的全部展开和折叠功能，涉及AJAX获取数据和DOM操作。

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

原理就是找到展开和折叠对应的图标class名称，然后使用js模拟循环点击的方式实现。

html代码

<div id="menuTree" class="demo-tree-more"></div>

js组件渲染代码

   tree.render({
       elem: '#menuTree',
       data: getData(),  //ajax获取data数据
       showCheckbox: true,  //是否显示复选
       id: 'demoId' 
   });

点击全部展开按钮事件

//menuTree换成你自己的id就行
var treeContainer = document.querySelector('#menuTree');
var expandIcons = treeContainer.querySelectorAll('.layui-icon-addition');
expandIcons.forEach(function(icon) {
    var clickEvent = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
});
icon.dispatchEvent(clickEvent);
});

点击折叠全部按钮事件

//menuTree换成你自己的id就行
var treeContainer = document.querySelector('#menuTree');
var expandIcons = treeContainer.querySelectorAll('.layui-icon-subtraction');
expandIcons.forEach(function(icon) {
    var clickEvent = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
});
icon.dispatchEvent(clickEvent);
});