0

閉じるボタンを追加したい単純なスライド切り替え設定がありますが、removeClass() が機能していないようです。

閉じるリンクをクリックすると、前の色に戻り (.active を削除)、開いている他のものはすべて開いたままにします。つまり、この近いリンクは、それが含まれているトグルにのみ影響するはずです。タイトル div とコンテンツ div から「アクティブな」クラスを削除し、コンテンツ div を上にスライドするだけの簡単なことだと思いました。

slideUp 部分は正常に動作しますが、「アクティブな」クラスはオフに切り替えたり削除したりしません。

これが私のjsです：

$("h2.titleTrigger").click(function(e){
e.preventDefault();
$(this).toggleClass("active").next().slideToggle("fast");
return false;
});

//CLOSE LINK
$(".closeIt").click(function(e){
 e.preventDefault();
$(this).closest(".toggleContent").slideUp("fast");
$(this).closest(".toggleContent").removeClass("active");
$(this).closest("h2.titleTrigger").removeClass("active");
 });

ここでフィドル

removeClass の代わりに toggleClass も試しましたが、どちらも機能しません。どこで私は間違えましたか？

4

3 に答える 3

1

はh2内に.toggleContentなく、閉じるボタンにも関連付けられていないため、代わりにこれを試してください ( demo )

$(".closeIt").click(function (e) {
    e.preventDefault();
    $(this).closest(".toggleContent")
        .slideUp("fast")
        .removeClass("active")
        .prev("h2.titleTrigger").removeClass("active");
});
于 2013-05-09T00:26:18.407 に答える
1

あなたの要求に答えるために：
「閉じるとき、開いている他のものを開いたままにします。つまり、この閉じるリンクは、それが入っているトグルのみを閉じる必要があります。」

このフィドルはそれを行う必要があります:
http://jsfiddle.net/acturbo/TpQff/1/

jquery:

$("h2.titleTrigger").click(function(e){
    e.preventDefault();
    //$(this).toggleClass("active").next().slideToggle("fast");
    $("#mydiv").slideToggle("fast");


return false;
});

//CLOSE LINK
$(".closeIt").click(function(e){
     e.preventDefault();
    $(this).parent().slideUp("fast");
    $(this).closest(".toggleContent").removeClass("active");
    $(this).closest("h2.titleTrigger").removeClass("active");
 });

html

<h2 class="titleTrigger">slide it</h2>

<div id="mydiv">
    <h2 class="closeIt">close  it</h2>
    inside div
</div>
于 2013-05-09T00:10:52.877 に答える