Javascript应用（下拉框）笔记17

标签：body 17 概括 Javascript li color 部门 var 下拉框

一个基础Html框架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="homework1.css">
    <script src="homework1.js" defer></script>
    <!-- defer 的使用只针对外引 -->
     <!-- Javascript 延迟加载：
      window.onload=function(){
        所需执行指令
      }
        （内嵌外引都能用）
     -->
</head>
<body>
    <div class="body">
        <ul class="c">
            <li class="a">
                <a href="#">首页</a>
            </li>
            <li class="a">
                <a href="#">机构简介</a>
                <ul class="a1">
                    <li><a href="#">部门概括</a></li>
                    <li><a href="#">部门概括</a></li>
                    <li><a href="#">部门概括</a></li>
                </ul>
            </li>
            <li class="a">
                <a href="#">招生工作</a>
                <ul class="a1">
                    <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="a">
                <a href="#">培养工作</a>
                <ul class="a1">
                    <li><a href="#">部门概括</a></li>
                    <li><a href="#">部门概括</a></li>
                    <li><a href="#">部门概括</a></li>
                    <li><a href="#">部门概括</a></li>
                </ul>
            </li>
            <li class="a">
                <a href="#">学位管理</a>
                <ul class="a1">
                    <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="a">
                <a href="#">学位点建设</a>
                <ul class="a1">
                    <li><a href="#">部门概括</a></li>
                    <li><a href="#">部门概括</a></li>
                </ul>
            </li>
            <li class="a">
                <a href="#">专业学位</a>
                <ul class="a1">
                    <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="a">
                <a href="#">导师管理</a>
                <ul class="a1">
                    <li><a href="#">部门概括</a></li>
                    <li><a href="#">部门概括</a></li>
                    <li><a href="#">部门概括</a></li>
                    <li><a href="#">部门概括</a></li>
                </ul>
            </li>
            <li class="a">
                <a href="#">学生工作</a>
                <ul class="a1">
                    <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="a">
                <a href="#">文件汇编</a>
                <ul class="a1">
                    <li><a href="#">部门概括</a></li>
                    <li><a href="#">部门概括</a></li>
                    <li><a href="#">部门概括</a></li>
                    <li><a href="#">部门概括</a></li>
                  
                </ul>
            </li>
            <li class="a">
                <a href="#">下载专区</a>
                <ul class="a1">
                <li><a href="#">部门概括</a></li>
                <li><a href="#">部门概括</a></li>
                <li><a href="#">部门概括</a></li>
                
               </ul>
            </li>
        </ul>
    </div>
</body>
</html>

设置css样式：

*{
    padding: 0;
    margin: 0;
    transition-duration: 0.5s;
    transition-timing-function: linear;
}
/* 设置动画效果 */

li{
    list-style: none;
}
/* 消除列表格式 */

.body{
    background:#af2222;
    width: 100%;
}

.body .c{
    display: flex;
    justify-content: space-around;
    margin: 0px auto;
    width: 80%;
    align-items:center ;
}

.body .c .a{
    position: relative;
    /* 父级设置 */
}
.body .c .a a:hover{
    opacity: 50%;
    color:#fff
}


.body .c .a a{
    color:black;
    font-size: large;
    text-decoration: none;
}

.body .c .a .a1{
    position: absolute;
    display: none;
     /* 隐藏操作 */
     height:0px;
     overflow:hidden;
     /* 解决父级隐藏但是子集依旧存在的情况 */
     width:90px;
}

.body .c .a:hover{
    opacity: 90%;
    

}
.body .c .a ul{
    background: #0000004a;
    /* opacity: 66%; */
    

}
.body .c .a ul li a{
    color:#fff;
    text-align: center;
    display: block;
    padding:8px;
    font-size: small;

}
.body .c .a ul li a:hover{
    color: red;
}

鼠标移动事件：

var obj =document.querySelectorAll(".a")
console.log(obj)


for (var i=0;i<obj.length;i++){
    obj[i].onmouseenter=function(){
      if(this.querySelector(".a1")){
        this.querySelector(".a1").style.display="block";
        // 可以用高度替代
        var obb=this.querySelectorAll(".a1 li")
        var sum=0
        for(var j=0;j<obb.length;j++){
            sum+=obb[j].clientHeight
        }
        this.querySelector(".a1").style.height=sum+"px"
        


      }
     }
     obj[i].onmouseleave=function(){
        
        if(this.querySelector(".a1")){
            // this.querySelector(".a1").style.display="none";
            this.querySelector(".a1").style.height="0px"
            

        }

      }

      // var date=new Date()  // Date()类 
      // date.getTime()  // 获取时间戳（时至今日所经过的毫秒数）

      // // 延迟定时器
      // setTimeout(function(){
      //   this.querySelector(".a1").style.display="none";
      // },2000)

      

}     // 鼠标版本

鼠标点击事件：

var obj =document.querySelectorAll(".a")
for (var i=0;i<obj.length;i++){
  obj[i].onclick=function(e){  // 点击后显示
    // 给每一个二级ul高度设为零
    e.stopPropagation()
    // 切除与父级以上的传播
    var u12=document.querySelectorAll(".a1")
    for(var i=0;i<u12.length;i++){
      u12[i].style.height="0px"
    }

    // 点击后出现
    if(this.querySelector(".a1")){
      this.querySelector(".a1").style.display="block";
      var obb=this.querySelectorAll(".a1 li")
              var sum=0
              for(var j=0;j<obb.length;j++){
                  sum+=obb[j].clientHeight
              }
              this.querySelector(".a1").style.height=sum+"px"
   }
  }

  document.onclick=function(){
    var u12=document.querySelectorAll(".a1")
    for(var i=0;i<u12.length;i++){
      u12[i].style.height="0px"
    }
   

  }   // 元素之间存在嵌套关系 绑定相同事件 就会出现事件传播机制

}



// ====================补充：绑定事件的方式==============

// 1.

// 2.
// var hh=function(){
//   alert(1)
// }
// <div class="child" onclick="hh()"> </div>

// // 3.添加监听器
// // addEventListener(事件类型,事件函数,事件传播阶段,默认false(冒泡) true(捕获))
// child.addEventListener("click",function(){
//       alert(1)
// },true)

标签：body,17,概括,Javascript,li,color,部门,var,下拉框
From： https://blog.csdn.net/m0_74977981/article/details/141970131

Javascript应用（下拉框）笔记17

相关文章

赞助商

阅读排行

Javascript应用（下拉框） 笔记17

相关文章

赞助商

阅读排行

Javascript应用（下拉框）笔记17