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和load来电，可以提高效率（一点点）：

    $('#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/

jquery切换显示div

3 个答案: