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

最新推荐文章于 2022-10-28 15:46:18 发布

游走走

最新推荐文章于 2022-10-28 15:46:18 发布

阅读量3.2k

点赞数 2

分类专栏： web 学习笔记

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_24734285/article/details/50285629

版权

学习笔记同时被 2 个专栏收录

108 篇文章 0 订阅

订阅专栏

web

93 篇文章 1 订阅

订阅专栏

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

游走走

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
#学习笔记#(16)ul li 二级下拉菜单-jQuery

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{bac
复制链接

扫一扫