4

私はフェイスブックチャットのようなことをしようとしていますが、これは個人的な使用のためです。一部のcss部分を除いて、すべて正常に動作します。

私は絶対位置でdivを配置しようとしますが、phpでチャットボックスをループするときに問題が発生します。float（右にfloat divボックス）を使用する必要があります。

ここで私のjsfiddleを確認できます

以下はjqueryのコードスニペットです

//Close
$('.closed1').click(function () {
    $('.wrap_box1').hide();
    $('.main_chat1').addClass('hide_wrap_box');
});

//Open
$('.open_chat1').click(function () {
    $('.wrap_box1').show();
    $('.main_chat1').removeClass('hide_wrap_box');
});

私のjsfiddleが表示されている場合、チャットボックスは上に折りたたまれていますが、下に折りたたむ方法はありますか？、閉じるボタンをクリックしてみてください。

4

3 に答える 3

6

私がこれにアプローチする方法は次のようなものです：

手順：

  • チャットボックスを囲むチャットエリアを作成します
  • インラインブロックとして表示するチャットボックス
  • ユーザーボックスを下に配置します：0

あなたの例では：

私はクラスで使用display:inline-blockしchat_boxます...このようにして、親はボックスのサイズに応答します。

そして、の親を右に浮かせますchat_box 

#chat_area {
    float:right;
}

ただし、user_boxそれ自体はの下部に揃えられchat_boxます。

.user_box {
    ...
    bottom:0;
}

このように、チャット領域全体が右に浮きます...そして、すべてのチャットボックスが閉じられると、サイズ変更は下に縮小します。

これが説明のためのフィドルです：http： //jsfiddle.net/mazzt/7/

于 2013-03-27T09:19:06.690 に答える
2

私はあなたの例から始めてそれをやろうとしました！

 $(document).ready(function () {
        $('.main_chat2').toggle("bounce",{ times: 3 }, "slow");
    $('.user_box').click(function () {
        if ($('.wrap_box2').is(":visible")) {
            $('.wrap_box2').hide();
            $('.main_chat2').addClass('hide_wrap_box');
            $('#icon').html('^');
        }
        else {
            $('.wrap_box2').show();
            $('.main_chat2').removeClass('hide_wrap_box');
            $('#icon').html('x');
        }
    });
   });

あなたはこのリンクでそれを見ることができます：http： //jsfiddle.net/ernestoarbitrio/DyfBW/31/

于 2013-07-24T15:46:23.107 に答える
1

試してみてslideToggle();くださいtoggleClass();

于 2013-03-27T08:55:07.990 に答える