2012-07-25 31 views
0

所以,我有以下代码:jQuery的手风琴 - 收起上再次点击

$(".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; 
}); 

从本质上讲,我希望得到这个精简的,但是当你点击一个类来打开该股利它是所有与此有关。它一切正常,但如果我再次点击相同的项目,它只是崩溃,然后再次立即重新打开。

回答

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; 
    } 
}); 
+0

不,是s直到崩溃,然后再次打开它。 – Palemo 2012-07-25 03:42:37

+0

这就是伟大的家伙,谢谢! – Palemo 2012-07-25 03:51:36

+0

@Palemo看看http://jsfiddle.net/3aH5r/它应该工作。 – Mifeng 2012-07-25 03:55:43

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; 
}); 

发生的事情是你向上滑动所有面板和消除对“一个”标签 所以当这些线路执行“活跃”类,

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

面板目前正在崩溃的话,会的slideToggle再次展开