jquery - jquery 显示/隐藏/切换等

Question

查询：

$("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 并隐藏所有其他，不仅显示/隐藏切换也是如此。谢谢！

Answer 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");
    });​
});