JQUERY:
$("li h2").click(function() {
$(this).toggleClass("active").siblings().removeClass("active");
$(this).next("div").slideToggle("fast").siblings("div").slideUp("fast");
});
HTML:
<ul>
<li>
<h2>headingA</h2>
<div>contentA</div>
<h2>headingB</h2>
<div>contentB</div>
</li>
</ul>
注意: 基本上我想要的是:当点击h2显示它旁边的div并隐藏所有其他时,不仅显示/隐藏切换。 谢谢!
答案 0 :(得分:1)
好吧,这是你的解决方案。从字面上看。我没有对你的代码做任何改动,除了添加一点CSS着色。
编辑:我将其修改为在DOM加载后运行。
CSS
.active {
background: yellow;
}
div {
background: orange;
}
HTML
<ul>
<li>
<h2>headingA</h2>
<div>contentA</div>
<h2>headingB</h2>
<div>contentB</div>
<h2>headingC</h2>
<div>contentC</div>
</li>
</ul>
的jQuery
// Remember to wrap your code to run after the DOM is loaded.
$(function() {
$("li div").hide();
$("li div:first").show();
$("li h2:first").addClass("active");
$("li h2").click(function() {
$(this).toggleClass("active").siblings().removeClass("active");
$(this).next("div").slideToggle("fast").siblings("div").slideUp("fast");
});
});