JS简单实现下拉菜单
首先，写一个菜单条，包含菜单，加上菜单项，并给他们加上样式，使下拉菜单变得更加美观，再加上js效果，设置其是否可见，用js写一个方法调用即可。
上图，是我写的一个简单的下拉菜单条，最右边的为初始状态。
接下来让我们开始写一个类似上面的下拉菜单（没有写样式的）
首先，写出四个带菜单项的的菜单分别展开显示。
我列出第一个做例子，需要给每个菜单的菜单项的整体定义一个id，如下图的ul的id，这里为了方便，将id分别取为：0、1、2、3 （给菜单项加上链接是为了鼠标放上去更好的看到效果）
给span加上id=“00”，是为了显示菜单的变化，分别定义：00，01，02，03
（+：表示打开下拉，- ：表示收起）
<div> <div >span id="00">+<span>一级菜单A</div>
<ul id="0" background="blue">
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
</ul></div>
同样的方法写出余下三个（参照图片，代码略）
第二步，给小菜单项加上一个style 设置是否可见的样式
block 为可见； none 为不可见。在这里讲第一个设置为可见，其他的设置为不可见。
<ul style="display:block" id="0">
第三步，编写js方法（核心）
//编写一个方法，用来改变菜单项的是否可见，来实现菜单的收起和下拉，并传入当前对象的idfunction caiDan(id){
//定义一个变量，用来保存span的id
var num = '0'+id;
//通过document.getElementById()这个方法得到当前对象
var idd = document.getElementById(id);
//判断当前对象的style.display 是否可见
//如果不可见,则将其改为可见
if(idd.style.display=="none"){
idd.style.display="block";
//将span中的“-”改为“+”，打开下拉菜单
document.getElementById(num).innerHTML="+";
}else{
//否则将其设置为不可见
idd.style.display="none";
//将span中的“+”改为“-”，收起下拉菜单
document.getElementById(num).innerHTML="-";
}
//利用for循环，将除了当前对象以外的都设为不可见 隐藏
for(var i=0;i<4;i++){
//除开当前对象
if(i!=id){
//设置为不可见，收起
document.getElementById(i).style.display="none";
document.getElementById('0'+i).innerHTML="-";
}
}
}
第四步，写完方法，给菜单栏的每次菜单加上onclick方法（点击事件）加上caiDan（id）方法
<div οnclick="caiDan('0')"><span id="00">-</span>一级菜单A</div>
最后，在浏览器中打开，点击即可看到效果
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
