jquery - jquery 切换显示 div

Question

我的网站上有一个聊天功能，用户点击一个按钮来打开它

$(function() { 
$('#chat').hide(); // hides the chat on load

$("#chat_btn").click(function(){ 
    $('#chat').show();
    $('#chat').load("chat.php");
    }); 
});

这一切都很好，但我也希望能够单击相同的按钮来关闭聊天。

我知道有某种切换功能而不是隐藏和显示，但我希望其他命令（加载 chat.php）仅在打开时运行。

我怎样才能做到这一点？

Answer 1

您可以使用另一个toggle函数：它需要两个（或更多）事件处理程序：第一次调用第一个，第二次调用第二个，第三次调用第一个，等等。

$("#chat_btn").toggle(function(){ // run the first time
    $('#chat').show();
    $('#chat').load("chat.php");
}, function() { // run the second time
    $('#chat').hide();
});

show请注意，您可以通过链接andload调用来提高效率（一点点） ：

    $('#chat').show().load("chat.php");

Answer 2

伪选择器:visible应该能够识别聊天窗口是否打开（假设您没有使用任何其他未包含的 CSS 技巧）

var $chat = $('#chat');

if($chat.is(':visible'))
    $chat.hide()
else
{
    $chat.show();
    $chat.load(...);
}

Answer 3

$('#chat_btn').click(function() {
  $('#chat').toggle('slow', function() {
    // Animation complete.
  });
});

jquery 有 .toggle() 方法。 http://api.jquery.com/toggle/