javascript——JS 实现下拉菜单

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方法（核心）

//编写一个方法，用来改变菜单项的是否可见，来实现菜单的收起和下拉，并传入当前对象的id
function caiDan(id){//定义一个变量，用来保存span的idvar 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>

 最后，在浏览器中打开，点击即可看到效果