js设置下拉菜单
html内容处理
<div class="top-title">
<ul>
<li><a>首页</a>
<ul>
<li><a href="#">一级菜单1</a></li>
<li><a href="#">一级菜单2</a></li>
<li><a href="#">一级菜单3</a></li>
<li><a href="#">一级菜单4</a></li>
</ul>
</li>
<li><a>学院概况</a>
<ul>
<li><a href="#">一级菜单1</a></li>
</ul></li>
<li><a>师资队伍</a>
<ul>
<li><a href="#">一级菜单1</a></li>
<li><a href="#">一级菜单2</a></li>
<li><a href="#">一级菜单3</a></li>
<li><a href="#">一级菜单4</a></li>
</ul></li>
<li><a>学生工作</a>
<ul>
<li><a href="#">一级菜单1</a></li>
<li><a href="#">一级菜单2</a></li>
</ul></li>
</ul>
</div>
内置的js
<script><script>
var list=document.querySelectorAll(".top-title>ul>li");
//在获取一个节点,不去定是否拿到了,最好输出一下
console.log(list);
//必须是先找到li再找到a,注意是querySelector,没有All,
//li下的ul也是算li的,很巧妙解决了移除ul再把一级菜单置空问题
//第一层循环是统一处理一级标题的
for(var i=0;i<list.length;++i){
//一级标题被onmouseover,ul也是算li的,鼠标在li下的ul也算li
list[i].onmouseover=function(){
//设置ul也就是下拉菜单的显示
if(this.querySelector("ul")){
this.querySelector("ul").style.opacity=1;
//求高度用querySelectorAll
var len=this.querySelectorAll("ul>li").length;
this.querySelector("ul").style.height=len*34+"px";
}
//选取到了,给li的a设置一个className,css再赋予这个名字
//的元素样式达到反应变换效果,就不用一个属性一个属性加了
//先把所有的一级菜单清空名字
for(var k=0;k<list.length;++k){
list[k].querySelector("a").className="";
}
//把当前一级菜单设置类名
this.querySelector("a").className="dd";
}
list[i].onmouseout =function(){
//设置下拉菜单的消失
if(this.querySelector("ul")){
//this.querySelector("ul").style.opacity=0;
this.querySelector("ul").style.height=0;
}
//设置一级菜单的消失
for(var k=0;k<list.length;++k){
list[k].querySelector("a").className="";
}
}
}
</script>
css
transition: all 2s ease;这是设置变换速度的
*{ margin:0; padding:0; transition: all 2s ease;}
.dd{ background-image: linear-gradient(to bottom, red , yellow);
}