首页新闻找找看学习计划

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>

现在出现开始的时候二级菜单能正常的显示以及消失,多次移入和移出就不显示了 ,不知道什么原因,麻烦大神

白芷若惊的主页 白芷若惊 | 初学一级 | 园豆:189
提问于:2019-05-20 15:19
< >
分享
最佳答案
0

我用这个js测试ok:<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

收获园豆:10
三人乐乐 | 老鸟四级 |园豆:3145 | 2019-05-21 09:43
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册