Jquery - 切换问题答案

【问题标题】：Jquery - toggle problemJquery - 切换问题
【发布时间】：2011-03-07 09:00:30
【问题描述】：

我有这个切换功能

$('#togglebtn').toggle(function() {
 $('#panel').show();
}, function() {
 $('#panel').hide();
});

我还有另一个按钮可以关闭/隐藏面板

$('#otherbtn').click(function() {
 $('#panel').hide();
});

我想说的是，当我用#otherbtn 隐藏面板时，#togglebtn 上的事件仍然处于活动状态，并给我一个额外的点击以再次开始切换面板。我该如何解决？

【问题讨论】：

标签： jquery toggle

【解决方案1】：

您想要做的已经可以通过另一个.toggle() 函数获得。只需将其绑定到click 事件：

$('#togglebtn').click(function() {
    $('#panel').toggle()
});

（而不是 $('#togglebtn').toggle(...)）

【讨论】：

【解决方案2】：

在切换按钮上触发点击事件。

$('#otherbtn').click(function() {
 $('#panel').hide();
 $('#togglebtn').click(); //resets tooglebtn state
});

【讨论】：

#otherbtn 在#panel 中
所以？你试过代码吗？当你点击#otherbtn时，函数将被执行。

【解决方案3】：

$('#otherbtn').click(function() {
 $('#panel').hide();
$('#togglebtn').toggle(function() {
 $('#panel').hide();
}, function() {
 $('#panel').show();
});

});

应该可以。反转了“otherbtn”的切换行为

【讨论】：

这会将函数作为单击事件处理程序绑定到#togglebtn，每次单击#otherbtn。当然，它会产生预期的效果，但您最终会得到很多不必要的点击事件处理程序。这绝对是不是正确的方法。
#otherbtn 在#panel 中