所以,我有以下代码:
$(".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。一切正常,但是如果我再次点击同一个项目,它就会崩溃,然后立即重新打开。
答案 0 :(得分: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;
}
});
答案 1 :(得分: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将再次展开