所以,我在这里得到了一个代码: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);
}

10-07 21:59