切换效果不工作

请，这是为什么不工作：切换效果不工作

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

谢谢...

来源

2010-10-11 Shaoz

这有点不寻常，所以让我们澄清一些事情。您的意图是用户必须首先点击'＃togglePanel'（它没有明显的效果），但在点击后，用户将能够点击'＃toolpanel'在两个动画之间切换？ – VoteyDisciple 2010-10-11 15:37:15

您不应该同时使用点击和切换事件。在内部切换会在对象上生成单击事件。如果#toolpanel在#togglePanel中，您可能会遇到事件冲突。你需要包装点击事件吗？ – nopuck4you 2010-10-11 15:40:56

@VoteyDisciple：不，但'togglePanel'实际上是一个按钮，用户可以点击来显示/隐藏'toolpanel'。 – Shaoz 2010-10-11 15:45:23

的toggle功能“内部使用点击事件”。也就是说，它将函数绑定到单击事件，所以您也不需要调用click。试试这个：

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

来源

2010-10-11 15:43:24 lonesomeday

请注意'＃togglePanel'和'＃toolpanel'是两个独立的元素。所以这不完全相同。这应该仍然基于'＃toolpanel'，但是'＃togglePanel'有一个**附加的**切换来显示/隐藏'＃toolpanel'基于Shaoz的最后评论。 – VoteyDisciple 2010-10-11 15:47:11

如果#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()中这样做）。

来源

2010-10-11 16:01:18 JasCav

谢谢你，我现在去看看 – Shaoz 2010-10-11 16:18:41

@Shaoz - 没问题。我希望能帮助你。 – JasCav 2010-10-11 17:18:47

我已经找到了解决我的问题，所有的答案混合起来，拿出这样的：

$("#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。

但是，感谢您的帮助，但。这是你的答案，让我开始解决问题。

来源

2010-10-11 16:32:15 Shaoz

切换效果不工作

回答

相关问题