简单下拉菜单制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
<!--简单给一些样式-->
*{margin: 0;padding: 0;}
.box {width: 200px;height: 30px;line-height: 30px;margin: 40px auto;}
.box span {width: 188px;height: 30px; border: 1px solid #ccc;display:block;padding: 0 5px;}
.box ul {border: 1px solid #ccc;overflow: auto;border-top: none;display: none;}
.box ul li {padding: 0 5px;}
.active{background: lightblue;}
</style>
<body>
<div class="box">
<span>鼠标</span>
<ul>
<!--给一个固定class名 使没有滑动的时候和主框里的内容一样-->
<li class="active">鼠标</li>
<li>键盘</li>
<li>电脑</li>
<li>音箱</li>
<li>显示器</li>
<li>...</li>
</ul>
</div>
</body>
<script>
//获取元素
var aspan = document.querySelector(".box span");
var aul = document.querySelector(".box ul")
var ali = document.querySelectorAll(".box ul li");
//先定义一个索引
var index = 1;
//封装一个遍历所有的li 把定义的索引给想要给的li 使其className = “active”
setActive();
//让获得索引的li的内容赋值给span
aspan.innerHTML = ali[index].innerHTML;
var i=0;
//给span一个点击事件 获得点击出现ul也就是把下拉菜单属性display：block；
aspan.onclick = function(eve){
//解决兼容
var e = eve || window.event;
//阻止冒泡
eve.stopPropagation();
eve.cancelBubble=true;
//判断下拉菜单的状态 隐藏和出现
if(i == 0){
//执行显示时 执行封装函数
aul.style.display = "block";
setActive();
i=1;
}else{
aul.style.display = "none";
i=0;
}
}
//当点击空白页面时也让下拉菜单消失
document.onclick = function(){
aul.style.display = "none";
i=0;
}
//遍历li 给li绑定索引
for(var j = 0;j < ali.length;j++){
ali[j].index = j;
//取消所有选中 只显示当前选中
ali[j].onmouseover = function(){
for(var k = 0;k<ali.length;k++){
ali[k].className = "";
}
this.className = "active";
}
点击li设置内容给span
ali[j].onclick = function(){
aspan.innerHTML = this.innerHTML;
index = this.index;
}
}
function setActive(){
for(var k=0;k<ali.length;k++){
ali[k].className="";
}
ali[index].className = "active";
}
</script>
</html>
