jquery之手风琴效果
Posted wangxingren
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery之手风琴效果相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<link rel="icon" href="">
<style>
*{margin: 0;
padding: 0;
list-style: none;
}
span{
display: block;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: orchid;
border: 1px solid #cccccc;
}
.menu{
display: none;
}
</style>
</head>
<body>
<ul>
<li class="lists">
<span>人族</span>
<ul class="menu">
<li>剑侠客</li>
<li>逍遥客</li>
<li>巫蛮儿</li>
<li>偃无师</li>
</ul>
</li>
<li class="lists">
<span>魔族</span>
<ul class="menu">
<li>骨精灵</li>
<li>狐美人</li>
<li>杀破狼</li>
<li>鬼潇潇</li>
</ul>
</li>
<li class="lists">
<span>仙族</span>
<ul class="menu">
<li>玄彩娥</li>
<li>神天兵</li>
<li>舞天姬</li>
<li>羽灵神</li>
</ul>
</li>
</ul>
<script src="jquery.js"></script>//一定要先引入JQuery文件
<script>
$(".lists").on("click",function () {
$(this).children("ul").slideToggle();
$(this).siblings().children("ul").slideUp();
})
</script>
</body>
</html>以上是关于jquery之手风琴效果的主要内容，如果未能解决你的问题，请参考以下文章
jQuery手风琴菜单 跪求图面上面这种JQ手风琴效果，带排行的。。。