前端-js例子：下拉框（事件传播机制）
addEventListener(事件类型，事件函数，事件传播阶段默认false 冒泡true捕获 只把最上头的元素触发，不会向触点元素传播)事件传播机制：元素之间存在嵌套关系， 绑定相同的事件，就会出现事件传输机制。：鼠标离开下拉框消失，但是标签下面空白处悬停下拉框还是会出现。2. js延迟加载等整个文档加载完执行内嵌外引都可用。或者在body元素的最后外引，实现元素的加载。当点击上面的菜单选项
·
目的：
要实现的效果如上：
当点击上面的菜单选项时，要出现下拉框。
补充js知识
1. defer延迟加载（只针对外引）
<script src="js/JavaScript.js" defer></script>或者在body元素的最后外引，实现元素的加载
2. js延迟加载 等整个文档加载完执行 内嵌外引都可用
window.οnlοad=function(){ ...}
实现效果步骤：
1. 定好框架
2.根据框架写body部分
<body>
<div class="content">
<ul class="main">
<li class="aa"> <a href="#">首页</a></li>
<li class="aa">
<a href="#">机构简介</a>
<ul class="sub">
<li><a href="#">部门概况</a></li>
<li><a href="#">机构职能</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</li>
<li class="aa">
<a href="#">招生工作</a>
<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="aa">
<a href="#">培养工作</a>
<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="aa">
<a href="#">学位管理</a>
<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="aa">
<a href="#">学位点建设</a>
<ul class="sub">
<li><a href="#">学位点评估</a></li>
<li><a href="#">学位点建设</a></li>
</ul>
</li>
<li class="aa">
<a href="#">专业学位</a>
<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="aa">
<a href="#">下载专区</a>
<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>
</ul>
</div>
</body>写完之后的效果：
3.写css部分样式
首先，把浏览器适应的外边距等效果去掉。
*{
padding: 0;
margin: 0;
}然后，a标签 li标签样式去掉
a{
text-decoration: none;
}
li{
list-style: none;
}
....
.content{
margin: 20px auto;
background-color: rgb(168, 30, 30);
}
.main{
width: 80%;
margin: auto;
display: flex;
justify-content: space-between;
}
.main .aa{
position: relative;
}
.main>li a{
color: #fff;
display: block;
padding: 7px;
}
.main>li a:hover{
color: rgb(168, 30, 30);
background-color: #fff;
}
.main>li .sub{
background-color: gray;
position: absolute;
/* display: none; */
height: 0px;
overflow: hidden;
transform: translate(-40px);
}
.main>li .sub a{
width: 140px;
text-align: center;
}
.main>li .sub li:hover{
background-color: rgb(192, 191, 191);
}其中，用display:none;隐藏起来 然后，display:block;显现
4. 用js实现效果转换
1>鼠标离开下拉框立马消失。
window.onload=function(){
var first_li=document.querySelectorAll(".main>li")
console.log(first_li)
for(var i=0;i<first_li.length;i++){
first_li[i].onmouseenter=function(){
if(this.querySelector("ul")){
this.querySelector("ul").style.display="block"
// this.querySelector("ul").style.height="150px"
// 获取盒子的高度
var second_li=this.querySelectorAll("ul li")
var sum_height=0
for(var j=0;j<second_li.length;j++){
sum_height+= second_li[j].clientHeight
// console.log(sum_height)
}
this.querySelector("ul").style.height=sum_height+"px"
}
}
first_li[i].onmouseleave=function(){
if(this.querySelector("ul")){
this.querySelector("ul").style.height="0px"
}
} 
2>鼠标离开不立马消失（用setTimeout延时定时器）
window.onload=function(){
var first_li=document.querySelectorAll(".main>li")
console.log(first_li)
for(var i=0;i<first_li.length;i++){
first_li[i].onmouseenter=function(){
if(this.querySelector("ul")){
this.querySelector("ul").style.display="block"
// this.querySelector("ul").style.height="150px"
// 获取盒子的高度
var second_li=this.querySelectorAll("ul li")
var sum_height=0
for(var j=0;j<second_li.length;j++){
sum_height+= second_li[j].clientHeight
// console.log(sum_height)
}
this.querySelector("ul").style.height=sum_height+"px"
}
}
first_li[i].onmouseleave=function(){
if(this.querySelector("ul")){
this.querySelector("ul").style.display="none"
// if()
this.querySelector("ul").style.height="0px"
setTimeout(function(){
var second_ul=document.querySelectorAll(".main ul")
for(var j=0;j<second_ul.length;j++){
second_ul[j].style.display="none"
}
},1500)
}
// 延迟定时器
// setTimeout
}
}
3>事件传播机制
现象：鼠标离开下拉框消失，但是标签下面空白处悬停下拉框还是会出现。
原因：
事件传播机制：元素之间存在嵌套关系， 绑定相同的事件，就会出现事件传输机制
捕获和冒泡只能二选一
阻止（停止）时间传播
child.onclick=function(e){
alert("我是child")
// 阻止（停止）时间传播
e.stopPropagation()
}不会传到父亲那里，触发谁执行谁
addEventListener(事件类型，事件函数，事件传播阶段 默认false 冒泡 true捕获 只把最上头的元素触发，不会向触点元素传播)
实现：
var first_li=document.querySelectorAll(".main>.aa")
for(var i=0;i<first_li.length;i++){
first_li[i].onclick=function(e){
e.stopPropagation()
// 先把所有的二级ul高度设为0px
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")){
// 获取盒子的高度
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
// console.log(sum_height)
}
this.querySelector(".sub").style.height=sum_height+"px"
}
}
}
// 点击页面任意处事件
document.onclick=function(){
// 先把所有的二级ul高度设为0px
var second_ul=document.querySelectorAll(".sub")
for(var i=0;i<second_ul.length;i++){
second_ul[i].style.height="0px"
}
}
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
5
0- 0
已为社区贡献5条内容
所有评论(0)