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>

最後是效果圖：