所以,我在这里得到了一个代码:Fiddle
当您单击“ ShowRed”时,我希望菜单下降,并且应该出现红色框。
这样可行。
现在单击红色部分时,我希望菜单再次出现,红色框应该消失。那也行。
现在,当我单击“ ShowRed”时,红色框再次出现。然后,当我单击“ ShowBlue”时,
我希望菜单再次出现,红色框应该消失,然后出现蓝色框,然后我希望菜单再次出现。但是菜单只是不动!
有任何想法吗?
最佳答案
SetTimeout函数是异步工作的,也就是说,它在完成内部的语句之前执行setTimeout下面的语句。那就是你的代码的问题。您可以这样写:http://jsfiddle.net/EW7aE/17/
var CurrPrev = "";
function showbox(ToShow) {
if(ToShow != CurrPrev){
if(CurrPrev != ""){
/*hidebox();*/
hideshow(ToShow);
}
else {
$(ToShow).css({'display': 'block'});
$('#menu').css({'margin-top': '100px'});
$('#menu').css({'height': '70px'});
CurrPrev = ToShow;
}
}
}
function hideshow(ToShow) {
$('#menu').css({'height': '100px'});
$('#menu').css({'margin-top': '0px'});
setTimeout(function(){
$(CurrPrev).css({'display': 'none'})
CurrPrev = "";
$(ToShow).css({'display': 'block'});
$('#menu').css({'margin-top': '100px'});
$('#menu').css({'height': '70px'});
CurrPrev = ToShow;
},500);
}
function hidebox() {
$('#menu').css({'height': '100px'});
$('#menu').css({'margin-top': '0px'});
setTimeout(function(){
$(CurrPrev).css({'display': 'none'})
CurrPrev = "";
},500);
}