0
点赞
收藏
分享

微信扫一扫

jquery二级菜单。显示了jquery的方便

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>

ul ul{display: none}
.nav{
width: 180px;
height: 180px;
background-color: red;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<span>一级菜单</span>
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
<span>一级菜单</span>
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
<span>一级菜单</span>
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
<span>一级菜单</span>
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>
<script src="jquery.js"></script>
<script>
$(".nav").children("li").mouseover(function(){
$(this).children("ul").stop().show(500)
.parent().siblings().children("ul").stop().hide(500);
})

// 动画开启之前,先停止
// 计时器开启之前,先清除

// .parent()父元素选择器
// .siblings()除了当前的所有同级(兄弟)

 

长风破浪会有时,直挂云帆济沧海



举报

相关推荐

0 条评论