1

Jクエリ:

$("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が表示され、他のすべてが非表示になります。表示/非表示の切り替えだけではありません。ありがとう！

4

1 に答える 1

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");
    });​
});
于 2010-06-11T22:49:04.580 に答える