Layui树状图无连接线展开关闭，左侧小图标改变实现

最新推荐文章于 2024-04-24 16:13:35 发布

Wild_Oats

最新推荐文章于 2024-04-24 16:13:35 发布

阅读量722

点赞数

分类专栏： Layui树组件文章标签： javascript html layui

本文链接：https://blog.csdn.net/Wild_Oats/article/details/116449423

版权

Layui树组件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 需要改为本地layui -->
    <link rel="stylesheet" type="text/css" href="static/layui/css/layui.css" />
    <style>
        .test3:after {
            content: '';
            position: absolute;
            left: 4px;
            top: 3px;
            z-index: 100;
            width: 0;
            height: 0;
            border-width: 5px;
            border-style: solid;
            border-color: #c0c4cc transparent transparent transparent;
            transition: .5s
        }
    </style>

</head>

<body>
    <div id="test13" class="demo-tree-more"></div>
    <!-- 需要改为本地layui -->
    <script src="static/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
    <script>
        // 点击节点左侧图标
        document.getElementById("test13").addEventListener("click", function (e) {
            if (e.target.className == "layui-tree-main") {
                e.target.children[0].children[0] = "layui-tree-iconArrow test3";
                if (e.target.children[0].children[0].className == "layui-tree-iconArrow ") {
                    e.target.children[0].children[0].className = "layui-tree-iconArrow test3"
                } else if (e.target.children[0].children[0].className == "layui-tree-iconArrow test3") {
                    e.target.children[0].children[0].className = "layui-tree-iconArrow "
                }
            } else if (e.target.className == "layui-tree-iconArrow ") {
                e.target.className = "layui-tree-iconArrow test3"
            } else if (e.target.className == "layui-tree-iconArrow test3") {
                e.target.className = "layui-tree-iconArrow "
            }
        })
        layui.use(['tree', 'util', "slider"], function () {
            let tree = layui.tree;
            var $ = layui.$,
                slider = layui.slider;
            tree.render({ //开始渲染树形组件
                elem: '#test13',
                data: [{
                    title: '江西' //一级菜单
                        ,
                    children: [{
                        title: '南昌' //二级菜单
                            ,
                        children: [{
                            title: '高新区' //三级菜单
                            //…… //以此类推，可无限层级
                        }]
                    }]
                }, {
                    title: '陕西' //一级菜单
                        ,
                    children: [{
                        title: '西安' //二级菜单
                    }]
                }],
                showLine: false, //是否开启连接线
                //点击节点
                click: function (obj) {
                    if (obj.data.children != undefined) {
                        // obj.elem                                                                 //得到点击的节点元素
                        // obj.elem[0].children[0].children[0].children[0].children[0].className    //得到点击的节点元素对应的左侧图标
                        let iEle = obj.elem[0].children[0].children[0].children[0].children[0];
                        if (iEle.className == "layui-tree-iconArrow ") {
                            iEle.className = "layui-tree-iconArrow test3"
                        } else if (iEle.className == "layui-tree-iconArrow test3") {
                            iEle.className = "layui-tree-iconArrow "
                        }
                    }
                }
            });
        });
    </script>
</body>

</html>

Wild_Oats

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Layui树状图无连接线展开关闭，左侧小图标改变实现

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta n
复制链接

扫一扫