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

jQuery实现风琴菜单，超级简单，一行代码！

2017-06-09 14:48 477 查看

问题描述：使用jQuery实现风琴菜单的效果

代码比较简单，直接上代码了，JQuery的文件，这里没有给。<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>风琴菜单</title>
</head>
<style type="text/css">
#div1{
width:200px;
height:400px;
border:1px solid black;
}
.menu{
height:20px;
background:blue;
color:white;
border:1px solid black;
margin-top:1px;
cursor:pointer;
}
.item{
height:18px;
background:green;
color:white;
border:1px solid black;
margin-top:1px;
}
.sub{
display:none
}

</style>
<body>
<div id="div1">
<div class="menu">办公管理</div>
<div class="sub">
<div class="item">人员管理</div>
<div class="item">仓储管理</div>
</div>
<div class="menu">公文管理</div>
<div class="sub">
<div class="item">收发公文</div>
<div class="item">日志管理</div>
</div>
<div class="menu">系统管理</div>
<div class="sub">
<div class="item">权限管理</div>
<div class="item">角色管理</div>
</div>
</div>
</body>
<script src=" jquery-1.11.1.min.js "></script>
<script>
$(".menu").click(function(){
$(this).next(".sub").slideToggle("slow").siblings(".sub").slideUp("slide");
});
</script>
</html>用jQuery实现，比用原生的JavaScript实现简单了很多，而且也比较容易理解.
快乐学习，快乐编程

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

标签：

相关文章推荐

新的分享

章节导航