前端——JavaScript综合练习下拉框样式实现

最新推荐文章于 2024-09-18 23:48:33 发布

Ttang23

最新推荐文章于 2024-09-18 23:48:33 发布

阅读量401

点赞数 14

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2301_78566776/article/details/142345310

版权

如图为最终效果，下拉框点击出现，点击其他任意位置后收回。

下拉框制作（河北大学研究生学院式样）

JavaScript部分代码思路为：首先将下拉框的高度设置为0px以达到隐藏的效果，然后获取盒子高度使下拉框的高度正好合适。最后当鼠标点击界面任意处时收回下拉框，即将其高度设置为0px。

其中，clientHeight属性，用于描述一个元素的高度信息。它是一个只读属性，它表示元素内部的高度，包括元素的内容和内边距的总高度，但不包括边框（border）、外边距（margin）以及水平滚动条的高度。具有动态性，当元素的内容、内边距或边框发生变化时，clientHeight的值也会相应更新。

在实现功能“当鼠标点击界面任意处时收回下拉框，即将其高度设置为0px。”时，我们发现其他标签包含着document中，当元素之间存在嵌套关系绑定相同事件就会出现事件传播机制。e.stopPropagation()便可阻止传播事件发生。具体用法如下代码：

 first_li[i].onclick=function(e){
        e.stopPropagation()
}

JavaScript部分代码

 <script>
        window.onload=function(){
            var first_li=document.querySelectorAll(".A>.b")

            for(var i=0;i<first_li.length;i++){
                first_li[i].onclick=function(e){
                    e.stopPropagation()

                // 给每一个二级ul高度设为0
                    var second_ul=document.querySelectorAll(".sub")
                    for(var i=0;i<second_ul.length;i++){
                        second_ul[i].style.height="0px"
                    }

                    if(this.querySelector(".sub")){
                        this.querySelector(".sub").style.display="block"
                    // 获取盒子高度
                        var second_li=this.querySelectorAll(".sub li")
                        var sum_height=0
                        for(var j=0;j<second_li.length;j++){
                        sum_height += second_li[j].clientHeight
                    }

                        this.querySelector(".sub").style.height= sum_height + "px"
                }
            }

        }
        // 点击页面任意处 
        document.onclick=function(){
            var second_ul=document.querySelectorAll(".sub")
            for(var i=0;i<second_ul.length;i++){
                        second_ul[i].style.height="0px"
                    }
        }

    }
    </script>

body部分代码


<body>
    <!-- 下拉框 -->
    <div class="a">
        <ul class="A">

            <li class="b">
                <h3><a href="#">首页</a></h3>
            </li>

            <li class="b">
                <h3><a href="#">机构简介</a></h3>
                 <ul class="sub">
                     <li><a href="#">部门概况</a></li>
                     <li><a href="#">机构职能</a></li>
                     <li><a href="#">联系方式</a></li>
                </ul>
            </li>

            <li class="b">
                <h3><a href="#">招生工作</a></h3>
                <ul class="sub">
                    <li><a href="#">硕士招生</a></li>
                    <li><a href="#">博士招生</a></li>
                    <li><a href="#">信息公开</a></li>
                    <li><a href="#">政策法规</a></li>
                    <li><a href="#">联系信息</a></li>
                    <li><a href="#">通知公告</a></li>
                    <li><a href="#">专业信息</a></li>
                 </ul>
            </li>

            <li class="b">
                <h3><a href="#">培养工作</a></h3>
                <ul class="sub">
                    <li><a href="#">学籍管理</a></li>
                    <li><a href="#">教学管理</a></li>
                    <li><a href="#">培养方案</a></li>
                    <li><a href="#">课程建设</a></li>
                </ul>
            </li>

            <li class="b">
                <h3><a href="#">学位管理</a></h3>
                <ul class="sub">
                    <li><a href="#">学位管理</a></li>
                    <li><a href="#">学位委员会</a></li>
                    <li><a href="#">政策法规</a></li>
                    <li><a href="#">常置信息</a></li>
                    <li><a href="#">优博优硕</a></li>
                </ul>
            </li>

            <li class="b">
                <h3><a href="#">学位点建设</a></h3>
                <ul class="sub">
                    <li><a href="#">学位点评估</a></li>
                    <li><a href="#">学位点建设</a></li>
                </ul>
            </li>

            <li class="b">
                <h3><a href="#">专业学位</a></h3>
                <ul class="sub">
                    <li><a href="#">专业学位案例中心</a></li>
                    <li><a href="#">示范课、案例库建设</a></li>
                    <li><a href="#">培养实践基地建设</a></li>
                    <li><a href="#">专业学位教指委网站</a></li>
                    <li><a href="#">全国各专业学位教指委指导性培养方案</a></li>
                </ul>
            </li>


            <li class="b">
                <h3><a href="#">导师管理</a></h3>
                <ul class="sub">
                    <li><a href="#">导师选聘</a></li>
                    <li><a href="#">导师培训</a></li>
                    <li><a href="#">导师考核</a></li>
                    <li><a href="#">博士生导师简介</a></li>
                </ul>
            </li>



            <li class="b">
                <h3><a href="#">学生工作</a></h3>
                    <ul class="sub">
                    <li><a href="#">思政教育</a></li>
                    <li><a href="#">日常事务</a></li>
                    <li><a href="#">奖助工作</a></li>
                    <li><a href="#">创新创业</a></li>
                    <li><a href="#">就业工作</a></li>
                    <li><a href="#">研究生会</a></li>
                    <li><a href="#">政策文件</a></li>
                </ul>
            </li>


            <li class="b">
                <h3><a href="#">文件汇编</a></h3>
            </li>


            <li class="b">
                <h3><a href="#">下载专区</a></h3>
                <ul class="sub">
                    <li><a href="#">招生材料</a></li>
                    <li><a href="#">培养材料</a></li>
                    <li><a href="#">学位材料</a></li>
                    <li><a href="#">导师材料</a></li>
                    <li><a href="#">评奖评优</a></li>
                    <li><a href="#">各类证明材料</a></li>
                    <li><a href="#">就业创业</a></li>
                </ul>
            </li>
    

        </ul>

    </div>
</body>

css样式部分

.a{
    background: #ebebeb;
    height: 50px;
    
}
 

.A{
    display: flex;
    width: 90%;
    margin: 120px auto;
    line-height: 50px;
    /* background: rgb(123, 123, 231); */
    padding: 0px 15px;
    justify-content: space-between;
    /* position: relative */
}

li{
    list-style: none;
}

.b{
    /* border: rgb(209, 159, 97) 2px solid; */
    padding: 0px 25px;
    position: relative

}

h3 a{
    text-decoration: none;
    color: black;
    font-weight: 500;
    align-items: center;
}
.b:hover{
    background: #cccccc;
}


/* .sub{
    background: rgba(0, 0, 0, 0.696);
    position: absolute;

    width: 170px;
    top: 50px;
    left: -18px;
    display: none;
} */
.sub a{
    display: block;  
    /* a标签 内联级元素 撑不起来 转为块级元素 */
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    color: white;
    align-items: center;
    line-height:40px;
    font-size: 15px;
}


.sub li:hover{
    background: rgba(255, 255, 255, 0.696);
    color: rgba(0, 0, 0, 0.674);

}

.sub{
    background: rgba(0, 0, 0, 0.684);
    position: absolute;
    
    height: 0px;
    width: 170px;
    top: 50px;
    left: -18px;
    /* display: none; */
    overflow: hidden;
}