2016-04-25 JQuery-下拉菜单
简介：通过JQuery实现简单的下拉菜单
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>JQuery-下拉菜单</title>
<link type="text/css" rel="stylesheet" href=""/>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
#div0_J3{margin:auto;width:400px;border:0px solid green;margin-top:5px;}
#tb1 td{border:1px solid #C1C1C1;height:30px;width:70px;text-align:center;}
#div1_J3{width:80px;border:1px solid #C1C1C1;display:none;margin-top:-2px;margin-left:2px;}
#div2_J3{width:80px;border:1px solid #C1C1C1;display:none;margin-top:-2px;margin-left:77px;}
#tb2 td{border:0px solid red;height:30px;width:78px;text-align:center;}
#tb3 td{border:0px solid red;height:30px;width:78px;text-align:center;}
</style>
<script>
$(document).ready(function(){
$("td").mouseover(function(){
var tdT=$(this).text();
switch(tdT){
case "TAB1" :$("#div1_J3").stop().slideDown();
$("#div1_J3").mouseover(function(){
$(this).css({'display':'block'});
});
$("#div1_J3").mouseout(function(){
$(this).css({'display':'none'});
});
$(this).mouseout(function(){
$("#div1_J3").css({'display':'none'});
});
break;
case "TAB2" :$("#div2_J3").stop().slideDown();
$("#div2_J3").mouseover(function(){
$(this).css({'display':'block'});
});
$("#div2_J3").mouseout(function(){
$(this).css({'display':'none'});
});
$(this).mouseout(function(){
$("#div2_J3").css({'display':'none'});
});
break;
}
});
});
</script>
</head>
<body>
<div id="div0_J3">
<table id="tb1">
<tr><td>TAB1</td><td>TAB2</td><td>TAB3</td><td>TAB4</td><td>TAB5</td></tr>
</table>
<div id="div1_J3">
<table id="tb2">
<tr><td>Line1</td></tr><tr><td>Line2</td></tr><tr><td>Line3</td></tr>
</table>
</div>
<div id="div2_J3">
<table id="tb3">
<tr><td>Line1</td></tr><tr><td>Line2</td></tr><tr><td>Line3</td></tr>
</table>
</div>
</div>
</body>
</html>
运行结果：
