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>

最后是效果图：