简单jQuery 实现手风琴菜单

简单jQuery 实现手风琴菜单

css代码 如下：

	*{
	margin: 0;
	padding: 0;
}
	#accordion{
	width: 500px;
}
	#accordion>div>p{
		width: 500px;
		text-align: center;
		border: 1px solid #ccc;
	}
	#accordion>div>p>img{
	width: 500px;
	height: 190px;
}
	#accordion>div>div{
		width: 500px;
		background: url("ss3.jpg") no-repeat;
		background-size: 100%;
		text-align: center;
		line-height: 80px;
		display: none;
		border:0.5px solid #ccc;

	}
<div id="accordion">
	<div>
		<p>
			<img src="wrs5.jpg">
		</p>
			<div>不要皱眉,即使在伤心的时刻,因为你从不知道有谁会醉心于你的笑容</div>
			<div>千万别说直到永远，因为你压根不知道永远有多远。</div>
	</div>
	<div>
		<p>
			<img src="wrs2.jpg">
		</p>
			<div>你要努力，别因为生活，把自己变成一个low逼</div>
			<div>过去的靠现在忘记，将来的靠现在努力，现在才最重要。</div>
	</div>
	<div>
		<p>
			<img src="wrs3.jpg">
		</p>
			<div>如果放弃太早，你永远都不知道自己会错过什么。</div>
			<div>做一个有脑子的,别让说起你的人,只记得你是个没用的废人</div>
	</div>

</div>

jQuery代码（虽然看着不习惯，但比js少很多哦！）如下：

<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
/*$(document).ready(function(){
	alert("hello jquery");
});

$(function(){
	alert("hello jquery1");
});
window.onload=function(){
	alert("hehe");
};*/
$("#accordion>div>p").click(function(){

	$(this).nextAll().slideDown().end().parent().siblings().children("div").hide();
});

</script>

！一个做前端的妹子。

！喜欢挑战一切不可能。

！欢迎来骚扰。

！嘤嘤嘤。