JS点击实现子菜单出现隐藏

最新推荐文章于 2022-12-03 17:09:58 发布

猿分&

最新推荐文章于 2022-12-03 17:09:58 发布

阅读量547

点赞数

分类专栏： JavaScript 前端文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_52006379/article/details/126514848

版权

前端同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

JavaScript

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .menu {
        width: 300px;
      }
      .menu-item {
        width: 100%;
        overflow: hidden;
      }
      .title {
        width: 100%;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .title:hover {
        cursor: pointer;
      }
      .bg-pink {
        background-color: pink;
      }
      .bg-aqua {
        background-color: aqua;
      }
      .sub-menu {
        height: 0px;
      }
    </style>
</head>
<body>
    <div class="menu">
        <div class="menu-item">
            <div class="title bg-pink">博客</div>
        </div>
        <div class="menu-item">
            <div class="title bg-pink" onclick="oppenMenu(this)">技术支持</div>
            <div class="sub-menu" >
                <div class="title bg-aqua">菜单一</div>
                <div class="title bg-aqua">菜单二</div>
                <div class="title bg-aqua">菜单三</div>
                <div class="title bg-aqua">菜单四</div>
            </div>
        </div>
        <div class="menu-item">
            <div class="title bg-pink">操作</div>
        </div>
    </div>
    
    <script>
        
            //获取元素属性值函数
            function getStyleValue(dom,attr){
                return parseFloat(getComputedStyle(dom)[attr]);
            }

            //点击事件函数
            function oppenMenu(dom){
                //dom表示绑定的元素节点，获取dom的父元素，即获取 技术支持 的父元素 menu-item
                const menuItem=dom.parentNode;
                //获取父元素（menu-item）的儿子（sub-menu）
                const subMenu= menuItem.querySelector('.sub-menu')

                //通过getStyleValue函数获取subMenu（sub-menu）的高度
                const height=getStyleValue(subMenu,'height');
                console.log(height)

                //判断高度
                if(height===0){
                    //获取menu-item的bg-aqua儿子，注意返回的是数组
                    const subMenuChildren=menuItem.querySelectorAll('.bg-aqua');

                    ///判断数组的长度，即子菜单个数
                    const num = subMenuChildren.length;

                    //得到子菜单的父亲赋予相应菜单高度的高度
                    const  subMenuHeight=num*45+'px';

                    //赋予父亲菜单高度
                    subMenu.style.height=subMenuHeight;

                }else{
                    subMenu.style.height='0px';
                }

            }

    </script>
</body>
</html>