树形层叠菜单举例

最新推荐文章于 2023-03-13 18:40:04 发布

一只桃子~

最新推荐文章于 2023-03-13 18:40:04 发布

阅读量100

点赞数

本文链接：https://blog.csdn.net/qq_43405603/article/details/119829386

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /**{
            margin: 0;
            padding: 0;
        }*/
        .box {
            width: 500px;
            /*1.角度  颜色*/
            background: linear-gradient(-45deg, lightseagreen, lightpink, lightblue, lightyellow, lightcoral);
            background: -webkit-linear-gradient(-45deg, lightseagreen, lightpink, lightblue, lightyellow, lightcoral);
        }

        .box span {
            display: block;
            height: 35px;
            line-height: 35px;
            cursor: pointer;
        }

        .box span.close:before {
            content: "+";
            font-size: 20px;
            font-weight: bold;
            color: red;
        }

        .box span.open:before {
            content: "-";
            font-size: 30px;
            font-weight: bold;
            color: red;
        }
    </style>
</head>

<body>
    <ul class="box" id="box">
        <li><span>第一级菜单</span>
            <ul>
                <li><span>第二级菜单</span>
                    <ul>
                        <li><span>第三级菜单</span>
                            <ul>
                                <li><span>第四级菜单</span></li>
                                <li><span>第四级菜单</span></li>
                            </ul>
                        </li>
                        <li><span>第三级菜单</span></li>
                        <li><span>第三级菜单</span></li>
                        <li><span>第三级菜单</span></li>
                    </ul>
                </li>
                <li><span>第二级菜单</span>
                    <ul>
                        <li><span>第三级菜单</span></li>
                        <li><span>第三级菜单</span></li>
                        <li><span>第三级菜单</span></li>
                        <li><span>第三级菜单</span></li>
                    </ul>

                </li>
                <li><span>第二级菜单</span>
                </li>
                <li><span>第二级菜单</span></li>
            </ul>
        </li>
        <li><span>第一级菜单</span></li>
        <li><span>第一级菜单</span></li>
        <li><span>第一级菜单</span></li>
    </ul>
    <script>


        let spans = document.getElementsByTagName('span');
        let box=document.getElementById("box");
        for(let i = 0;i<spans.length;i++){//循环每一个span
            let span = spans[i];//拿出每一个span
            if(span.nextElementSibling){//如果它有兄弟
                span.classList.add('close');//就给他加属性close(+)
                span.nextElementSibling.style.display = 'none'//并且让他的兄弟隐藏
            }
            else {//没有兄弟，-号
                span.classList.add('open');//没有兄弟（-）
            }
        }
        

        box.onclick=function(e){
           // console.log(1);
          let target=e.target;//当前点击的事件源头
          let tagName=target.tagName;//获取当前元素大写的标签名
          if(target.nextElementSibling&&tagName=="SPAN"){//看有没有兄弟元素
              //说明菜单里有东西
              if(target.className==="close"){//点击的时候，如果显示close(+),说明里面有东西
                  //如果当前类名是close,代表他是关闭状态，就把类名弄成open
                  target.className="open";  //给它加类名（-），让它变成-
                  //再把当前span的兄弟元素ul展示出来
                  target.nextElementSibling.style.display="block";//转块，一点击显示出来
              }
              else{//点完+，再点一次
                  target.className="close";//把（-）收起来
                  target.nextElementSibling.style.display="none";//把兄弟隐藏了
             
             
             // 当用户点击span关闭当前菜单的时候，咱们得把里边所有的菜单都关闭
                  let spanChildren=target.nextElementSibling.getElementsByTagName("span");//获取里边的所有span
             for(let i=0;i<spanChildren.length;i++){//循环里边的兄弟
                  let span=spanChildren[i];//获取兄弟
                  if(span.nextElementSibling){//如果它有兄弟
                    span.className="close";//关闭里边的小span们
                    span.nextElementSibling.style.display="none";//隐藏他们
                  }
                
                /*   span.nextElementSibling.style.display="none"; */
             }
                }
                
          }else{//无兄弟
              
          }
        }
        // 当点击span的时候，判断当前点击的span有么有兄弟元素，如果没有就啥都不做，
        // 如果有，在判断一下当前span的类名是啥，如果是close，那证明就是关着的，就让他的兄弟显示并且把span的类名改为open，(如果是open那就反过来)
    </script> 
     
</body>

</html>

一只桃子~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
树形层叠菜单举例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /**{ margin: 0; padding: 0; }*/ .box { .
复制链接

扫一扫