代碼:
<script type="text/javascript">
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
</script>
<style type="text/css">
body { margin: 10px auto; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; }
.accordion { width: 480px; border-bottom: solid 1px #c4c4c4; }
.accordion h3 { background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px; padding: 7px 15px; margin: 0; font: bold 120%/100% Arial, Helvetica, sans-serif; border: solid 1px #c4c4c4; border-bottom: none; cursor: pointer; }
.accordion h3:hover { background-color: #e3e2e2; }
.accordion h3.active { background-position: right 5px; }
.accordion p { background: #f7f7f7; margin: 0; padding: 10px 15px 20px; border-left: solid 1px #c4c4c4; border-right: solid 1px #c4c4c4; }
</style>
</head>
<body>
<div class="accordion">
<h3 class="active">Question One Sample Text</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi
malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo
lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae
odio. Vivamus vitae ligula.</p>
<h3>This is Question Two</h3>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa
gravida metus, commodo lacinia massa diam vel eros. Proin eget urna.
Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>Another Questio here</h3>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa
gravida metus, commodo lacinia massa diam vel eros. Proin eget urna.
Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>Sample heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa
gravida metus, commodo lacinia massa diam vel eros. Proin eget urna.
Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>Sample Question Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa
gravida metus, commodo lacinia massa diam vel eros. Proin eget urna.
Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
</div>
</body>
</html> 圖檔如下:
這裡的background-position:right top;很有技巧.
right -51px;
剛開始圖檔是向下，點選後：
.accordion h3.active { background-position: right 5px; } siblings([expr])
概述
取得一個包含比對的元素集合中每一個元素的所有唯一同輩元素的元素集合。可以用可選的表達式進行篩選。
找到每個div的所有同輩元素。
HTML 代碼:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
jQuery 代碼:
![JAVA 系列——>開發工具IntelliJ IDEA的安裝以及配置、快捷鍵IDEA 簡介[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)