0

だから、私は次のコードを持っています：

$(".btn-slide-1").click(function(){
    $('div[id^="panel"]').slideUp("slow");
    $('ul#menu li a').removeClass("active");
    $("#panel-about").slideToggle("slow");
    $(this).toggleClass("active"); return false;
});

$(".btn-slide-2").click(function(){
    $('div[id^="panel"]').slideUp("slow");
    $('ul#menu li a').removeClass("active");
    $("#panel-products").slideToggle("slow");
    $(this).toggleClass("active"); return false;
});

$(".btn-slide-3").click(function(){
    $('div[id^="panel"]').slideUp("slow");
    $('ul#menu li a').removeClass("active");
    $("#panel-specs").slideToggle("slow");
    $(this).toggleClass("active"); return false;
});

基本的に、私はこれを合理化しようとしていましたが、クラスをクリックすると、これに関連する div が開きます。すべて問題なく動作しますが、同じアイテムをもう一度クリックすると、折りたたまれてすぐに再び開きます。

4

2 に答える 2

0

jqueryコードは次のようになると思います

i$(".btn-slide-1").click(function(){
    var currentActive = $(this).hasClass("active");
    $('div[id^="panel"]').slideUp("slow");
    $('ul#menu li a').removeClass("active");

    if(!currentActive){
       $("#panel-about").slideToggle("slow");
       $(this).toggleClass("active"); 
    }
    return false;
});

何が起こるかというと、すべてのパネルを上にスライドさせ、「a」タグの「active」クラスを削除して、これらの行が実行されるときに、

$("#panel-about").slideToggle("slow");
$(this).toggleClass("active");

パネルは現在折りたたまれているので、slideToggleは再びそれを展開します

于 2012-07-25T03:41:42.633 に答える
0

コンディションチェックでワープできます。

$(".btn-slide-1").click(function(){
    if (!$(this).hasClass("active")) {
        $('div[id^="panel"]').slideUp("slow");
        $('ul#menu li a').removeClass("active");
        $("#panel-about").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    }
});
于 2012-07-25T03:25:10.580 に答える