jQuery中的切換效果不起作用

Question

請，為什么這不起作用：

$("#togglePanel").click(function(e){        
    $("#toolpanel").toggle(function(){
        $("#orderMap").animate({marginLeft: 0, width: "100%"}, 500);
    }, function(){
        $("#orderMap").animate({marginLeft: "341px", width: "576px"}, 500);
    });
});

但是，當我這樣做時，它會起作用：

$("#togglePanel").click(function(e){        
    $("#toolpanel").toggle(function(){
        $("#orderMap").animate({marginLeft: 0, width: "100%"}, 500);
    });
});

謝謝...

Answer 1

toggle功能“內部使用click事件”。 也就是說，它將功能綁定到click事件，因此您也不需要調用click 。 嘗試這個：

$("#togglePanel").toggle(function(){
    $("#orderMap").animate({marginLeft: 0, width: "100%"}, 500);
}, function(){
    $("#orderMap").animate({marginLeft: "341px", width: "576px"}, 500);
});

Answer 2

如果#togglePanel正在顯示和隱藏#toolPanel ，則我將它們的兩個事件分開而不是嵌套它們。 所以，做這樣的事情...

$("#togglePanel").toggle(function(e){        
    $("#toolPanel").show();
}, function() {
    $("#toolPanel").hide();
});

$("#toolpanel").toggle(function(){
    $("#orderMap").animate({marginLeft: 0, width: "100%"}, 500);
}, function(){
    $("#orderMap").animate({marginLeft: "341px", width: "576px"}, 500);
});

您無需嵌套它們即可實現所需的效果。

此外，我的解決方案可能會出現的一個問題是，即使隱藏和顯示#toolPanel的“切換”狀態也可以保存。 因此，您可能希望在隱藏它時重置其切換狀態（在#togglePanel.toggle() ）。

Answer 3

通過混合所有答案並提出以下解決方案，我找到了解決問題的方法：

$("#togglePanel").toggle(function(e){        
    $("#toolpanel").hide();
    $("#orderMap").animate({marginLeft: 0, width: "100%"}, 500);
}, function() {
    $("#toolpanel").show();
    $("#orderMap").animate({marginLeft: "341px", width: "576px"}, 500);
});

它按我的預期工作。 我要做的就是向'toolpanel'div添加hide和show方法。

但是，謝謝您的幫助。 正是您的回答使我有了解決方案的先機。