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

您可以在条件检查中对其进行变形。

$(".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 回答
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”标签上的“活动”类，因此当这些行执行时，

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

面板目前正在折叠，所以 slideToggle 将再次展开它

于 2012-07-25T03:41:42.633 回答