jQuery手风琴制做

在制做手风琴中主要用到jQuery中的几个方法：

　　1. siblings()，主要用来搜索同辈的元素，不包括本身。

div{
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}

<div id="btn"></div>
<div></div>
<div></div>
<script type="text/javascript">
	$().ready(function(){
		$("#btn").click(function(){
			$(this).siblings().css("background-color","red");
		})
	})
</script>

效果以下：

　　2. slideDown(speed,[fn])，向上滑动，slideUp(speed,[fn])，向下滑动，滑动效果

　　　　speed设置滑动效果的时长，能够是“show”，“normal”，“fast”中的其中一种，还能够是毫秒数值（1000）。

　　3. parent([expr])，取得一个包含着全部匹配元素的惟一父元素的元素集合。其中的expr为可选，能够写你要选择的特定的元素

　　　children([expr])，取得一个包含匹配的元素集合中每个元素的全部子元素的元素集合。其中的expr为可选，能够写你要选择的特定的元素

最后来看整个手风琴则制做：

css样式：

/*初始化*/
*{     
	margin: 0;
	padding: 0;
}
ul{
	width: 200px;
	list-style-type: none;
	text-align: center;
	margin-left: 600px;
}
li>div{
	width: 200px;
	height: 30px;
	border: 1px solid #000;
	display: none;
}
li>span{
	background-color: #99c;
	display: block;
	width: 200px;
	height: 30px;
	border: 1px solid #000;
}　　

HTML和jQuery代码：

<link rel="stylesheet" type="text/css" href="sfq.css" />       将css的样式导入

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>       将封装好的数据库导入

<ul>
	<li>
		<span>1.0</span>
		<div>1</div>
		<div>1</div>
		<div>1</div>
		<div>1</div>
	</li>
	<li>
		<span>2.0</span>
		<div>2</div>
		<div>2</div>
		<div>2</div>
		<div>2</div>
	</li>
	<li>
		<span>3.0</span>
		<div>3</div>
		<div>3</div>
		<div>3</div>
		<div>3</div>
	</li>
	<li>
		<span>4.0</span>
		<div>4</div>
		<div>4</div>
		<div>4</div>
		<div>4</div>
	</li>
</ul>
<script type="text/javascript">
	$().ready(function() {      //等待也省得加載完成是，才會解析
		$("span").click(function() {
			$(this).siblings().slideDown(300).parent().siblings().children("div").slideUp(300);
		});
　　　　　});
</script>

最后是效果图：