您的位置：首页 > Web前端 > JQuery

#学习笔记#(16)ul li 二级下拉菜单-jQuery

2015-12-13 19:48 836 查看

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航