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的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  onclick="caiDan('0')"><span id="00">-</span>一级菜单A</div>

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

 

评论

1 楼 百合不是茶 2014-12-07  

触发事件中传入(this,id);可以直接在if-else里面触发就显示,否者隐藏