Jquery写的一个下拉菜单
0
悬赏园豆：10
[已解决问题]
解决于 2019-05-22 15:45
这是我的代码
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<style type="text/css">
*{ margin:0px;
padding:0px;
}
.div_body{ margin:50px 300px;}
.menu_1>li{ width:70px; height:50px;
list-style:none; background:gray;
text-align:center; float:left;
line-height:50px;}
.menu_2{ list-style:none;
background:red;
display:none; }
</style>
<script type="text/javascript">
$(function () {
//1.侦听移入事件
$(".menu_1>li").mouseenter(function () {
//拿到二级菜单
var $menu_2 = $(this).children(".menu_2")
//运行此动画前停止所有动画
$menu_2.stop();
//显示菜单项的子菜单项
$menu_2.slideDown(100);
});
//2.侦听移出事件
$(".menu_1>li").mouseleave(function () {
//拿到二级菜单
var $menu_2 = $(this).children(".menu_2");
$menu_2.stop();
//让二级菜单消失
$menu_2.slideUp(100);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="div_body">
<ul class="menu_1">
<p>一级菜单
<ul class="menu_2">
<p>二级菜单</p>
<p>二级菜单</p>
<p>二级菜单</p>
<p>二级菜单</p>
<p>二级菜单</p>
</ul>
</p>
<p>一级菜单
<ul class="menu_2">
<p>二级菜单</p>
<p>二级菜单</p>
<p>二级菜单</p>
<p>二级菜单</p>
</ul>
</p>
<p>一级菜单
<ul class="menu_2">
<p>二级菜单</p>
<p>二级菜单</p>
</ul>
</p>
<p>一级菜单
<ul class="menu_2">
<p>二级菜单</p>
<p>二级菜单</p>
<p>二级菜单</p>
</ul>
</p>
</ul>
</div>
</form>
</body>
</html>
现在出现开始的时候二级菜单能正常的显示以及消失，多次移入和移出就不显示了 ，不知道什么原因，麻烦大神
最佳答案
0
