JQ 简单实现手风琴
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQ 简单实现手风琴相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="reset.css">
<style type="text/css">
ul{
width: 500px;
margin: 0 auto;
}
ul li{
height: 60px;
}
.box{
background: #daa772;
}
.son{
background: #7a812d;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".box").on("click",function(){
var index = $(this).parent().index();
$(".son").each(function(){
var rep = $(this).parent().index();
if(index == rep){
return;
}else{
$(this).slideUp("slow");
}
});
$(this).siblings(".son").slideToggle("slow");
});
});
</script>
</head>
<body>
<ul>
<li>
<div class="box">丫丫丫丫丫丫丫丫丫丫丫</div>
<div class="son">呸呸呸呸呸呸呸呸呸呸呸</div>
</li>
<li>
<div class="box">飒飒飒飒飒飒飒飒飒飒飒</div>
<div class="son">青蛙青蛙青蛙青蛙青蛙青</div>
</li>
<li>
<div class="box">打发打发打发打发打发打</div>
<div class="son">讨厌讨厌讨厌讨厌讨厌讨</div>
</li>
<li>
<div class="box">龉龉龉龉龉龉龉龉龉龉龉</div>
<div class="son">急急急急急急急急急急急</div>
</li>
</ul>
</body>
</html>
以上是关于JQ 简单实现手风琴的主要内容，如果未能解决你的问题，请参考以下文章