用js+css实现一个三级下拉菜单

dhc_1229 2011-12-13 04:52:10

1===========
2===========
3===========
1===========
1===========
2===========
就如这种形式的下拉菜单，有的请提供一个，谢谢

...全文

1080 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

caibird1024 2011-12-14

打赏
举报

自己手写的



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title>MENU</title>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

  <script type="text/javascript">

  	 

  	 var datas = [];

  	 datas[0]={"id":1,"pid":-1,"name":'A'};

	 datas[1]={"id":2,"pid":-1,"name":'B'};

	 datas[2]={"id":3,"pid":1,"name":'C'};

	 datas[3]={"id":4,"pid":1,"name":'D'};

	 datas[4]={"id":5,"pid":4,"name":'E'};

	 datas[5]={"id":6,"pid":2,"name":'f'};

	 datas[6]={"id":7,"pid":3,"name":'g'};

	 datas[7]={"id":8,"pid":2,"name":'h'};

	

	function _add(_id){

		if($("ul[name='"+_id+"']").length>0){

			$("ul[name='"+_id+"']").show();

			return;

		}

		var htmlStr = "";

		for(var i=0;i<datas.length;i++){

			if(datas[i]["pid"]==_id){

				htmlStr +="<li id='"+datas[i]["id"]+"' onmouseover='_add("+datas[i]["id"]+")' onmouseout='_hide("+datas[i]["id"]+")' >";

				htmlStr +=datas[i]["name"];

				htmlStr +="</li>";

			}

		}

		var cont=$("<ul name='"+_id+"' >"+htmlStr+"</ul>");

		$("#"+_id).append(cont);

	}

	function _hide(_id){

		$("ul[name='"+_id+"']").hide();

	}

  </script>  

 </head>



 <body>

  	<div id="mu" >

  	</div>

	<script type="text/javascript">

	<!--

	 var htmlStr = "";htmlStr +="<ul>";

	 for(var i=0;i<datas.length;i++){

	    if(datas[i]["pid"]==-1){

	    	htmlStr +="<li id='"+datas[i]["id"]+"' onmouseover='_add("+datas[i]["id"]+")' onmouseout='_hide("+datas[i]["id"]+")'>";

		 	htmlStr +=datas[i]["name"];

		 	htmlStr +="</li>";

	    }

	 }

	 htmlStr +="</ul>";

	 $("#mu").html(htmlStr);

	//-->

	</script>

 </body>

</html>