1

Web サイトのテキストのトグル スクリプトを作成しました。約 10 個の「ヘッド」リンクと 2 つの h3 リンクがあります。基本的に、ヘッドリンクをクリックすると開き、もう一度クリックすると閉じます。h3 をクリックすると、すべてが開きます。すでに開いている場合は、開いたままにします。問題の 1 つは、それらをすべて開いてから閉じて 1 つだけ開いてから、h3 を 2 回クリックしなければならないすべてを閉じようとした場合です。これは、単独で開くと active1 のクラスが与えられ、まとめて開くと active のクラスが与えられるためです。したがって、最初に h3 を押すと、active1 がアクティブに変わります (これは、1 つだけが開いていて、すべてを開きたい状況ですべてを閉じたり開いたりできるようにするためです)。 . それが理にかなっていることを願っています。

これがJFiddleです。

$(".topics").hide();
4

3 に答える 3

0

この更新されたjsFiddleを参照してください。

元のコード：

 if( $(".head").hasClass("active1") ){
    $(".head").removeClass("active1").addClass("active").next().slideDown(350);
        } else

更新されたコード：

$("h3").click(function(){
    if( $(".head").hasClass("active1") ){
    $(".head").removeClass("active1").next().slideUp(350);
        }
于 2012-11-21T15:26:41.890 に答える
0

1 つのクラスでできるのに、なぜ 2 つのクラスを使用する必要があるのでしょうか。どちらが開いているかどうかを伝えるだけです。

$("h3").click(function() {
    var $div = $(this).siblings('.head'); // cache the relative divs
    var len = $div.filter('.active').length; // get how many are active
    var $topic = $(".topics", $(this).parent()); // topics relative to element
    if (len == $div.length) { // if all are active
        $div.removeClass('active'); // remove class active
        $topic.slideUp(350); // slideup
    } else {
        $div.addClass('active'); // else add active to all
        $topic.slideDown(350) //  slide down
    }
});

$(".head").click(function() {
    var $el = $(this); // cache this
    if ($el.hasClass("active")) {
        $el.removeClass("active").next().slideUp(350);
    } else {
        $el.addClass("active").next().slideDown(350);
    };
});

http://jsfiddle.net/pmsJa/

于 2012-11-21T15:19:18.310 に答える
0

これはあなたが求めている機能の種類ですか: http://jsfiddle.net/Ry6Nr/8/ ?

$(document).ready(function(){    
    $(".topics").hide();        
    $(".head").click(function(){
        $(this).toggleClass("active").next().slideToggle();
    });
});

toggleClassand関数は、slideToggleあなたがやろうとしていると私が思うことをします。

于 2012-11-21T15:18:24.883 に答える