0

私のサイトにはチャット機能があり、ユーザーはボタンをクリックして開きます

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

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

これはすべて正常に機能しますが、同じボタンをクリックしてチャットを閉じることもできるようにしたいと思います。

非表示と表示の代わりにある種のトグル機能があることは知っていますが、他のコマンド（chat.phpをロードする）を開いているときにのみ実行したいと思います。

これどうやってするの？

4

3 に答える 3

3

もう 1 つの関数を使用できますtoggle。2 つ (またはそれ以上) のイベント ハンドラーが必要です。

$("#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");
于 2012-04-24T17:31:43.107 に答える
1

疑似セレクターは:visible、チャット ウィンドウが開いているかどうかを識別できる必要があります (含まれていない他の CSS トリックを使用していないと仮定します)。

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

if($chat.is(':visible'))
    $chat.hide()
else
{
    $chat.show();
    $chat.load(...);
}
于 2012-04-24T17:31:09.887 に答える
0 
$('#chat_btn').click(function() {
  $('#chat').toggle('slow', function() {
    // Animation complete.
  });
});

jqueryには.toggle（）メソッドがあります。 http://api.jquery.com/toggle/

于 2012-04-24T17:30:19.330 に答える