<html>
<head>
<style type="text/css">
body{font-family:微软雅黑;}
ul
{
list-style:none;
width:115px;
line-height:30px;
}
ul li
{
background:#DCDCDC;
text-align:center;
}
div1
{
float:left;
}
.div2
{
height:30px;
position:relative;
}
#p1
{
background:#DCDCDC;
width:115px;
}
#choose
{
margin-top:200px;
}
</style>
<script src="jquery-1.11.3.min.js" language="javascript" type="text/javascript"></script>
</head>
<body>
<div class="div2">
<div class="div1">
<p id="p1">鼠标移入此处:</p>
<ul id="a" class="div2">
</li>
<li>射雕英雄传</li>
<li>萧十一郎</li>
<li>大唐双龙传</li>
<li id="a1">笑傲江湖
<ul class="select2">
<li class="select2">笑傲江湖(上)</li>
<li class="select2">笑傲江湖(下)</li>
</ul>
</ul>
</div>
</div>
选择一本你喜欢的书
<p id="choose">选择结果</p>
<script>
$(document).ready(function(){
$("#a").hide();//初始时隐藏第一级菜单
$(".select2").hide();//初始时隐藏第二级菜单
$("p").mouseenter(function(){
$("#a").slideDown();//鼠标移动到p上,展开第一级菜单
$("#a1").mouseenter(function(){$(".select2").show();});
$("#a1").mouseleave(function(){$(".select2").hide();});//鼠标移动到一级菜单,展开二级菜单
$("#a1").mouseleave(function(){$(".select2").slieUp();});//鼠标离开一级菜单,收起二级菜单
});
$("#a").mouseleave(function(){$("#a").slideUp();});//鼠标离开ul列表时,列表收起
$("ul li").click(function(){var $t=$(this).text();$("#choose").text("你选中的是:"+$t);//这句有问题,会显示该菜单的所有内容
});
});
</script>
</body>
</html>
#学习笔记#(16)ul li 二级下拉菜单-jQuery
最新推荐文章于 2021-07-02 02:03:12 发布