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。试试这个：

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

它按我的预期工作。我所要做的就是将hide和show方法添加到'toolpanel'div。

但是感谢你的帮助。这是你的答案让我对我的解决方案起了作用。

jquery中的切换效果不起作用

3 个答案: