私はノードJSを使って作業しています。完全に動作するチャットを作成しました。下の固定divのJQueryトグルがすべてのdivを上に移動
今私が気づいている問題は、複数のタブがあり、1つだけをクリックすると、すべてのタブが上に移動するということです。
これは、以下の画像で見ることができます。赤い部分は、タブは、彼らが後1タブ
をクリックした後
前にCSS
で下方に移動することができなければならないことを示すにあることdiv
ですもう一度タブをクリックするとjQueryの部分が正しいことがわかります
画像に示されるようにCalvin
、srcc-test
、tramsTalk
、このコードは以下の各タブについて繰り返されるページ
の底に異なるIDを持つ座っ固定DIVです。
<div style="position:fixed;bottom:0;right:26px;background-color:red;">
<div id="tramsTalk_chat" style="background-color:white;position:relative;bottom:0px;width:275px;float:right">
<div id="tramsTalk_chat_header" class="chat_header"><p><i class="icon-chevron-up icon-white pull-right"></i>tramsTalk</p></div>
<div class="overflow_chat" id="tramsTalk_chat_textarea"><hr style="margin-top:-8px;margin-bottom:1px;"></div>
<div class="chat_textarea_holder" id="tramsTalk_msg_textarea_holder"><textarea class="chat_box" rows="3" id="tramsTalk_msg" ignoreesc="true" name="tramsTalk_chat_message" onkeyup="check(this,event);" style="resize: none; overflow-y: hidden; "></textarea></div>
</div>
</div>
これはうまくいくと思っていましたが、それでもタブが上部に表示されていました。ただ、修正再表示する
:jQueryのは正常に動作している
、我々は切り替えが、それまでのタブがまだ下に固定する必要があります移動します。 (私はそれらをクリックすることができますし、彼らはテキストボックスをプルダウンします)。私はCSSが問題だと思う、私は確信していない。魔法のように
SOLUTION
<style>
.wrappers > div {
margin-top: 275px;
}
.active {
height: 300px;
background-color: white;
margin-top: 0 !important;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#Calvin_chat').click(function(){
alert('test');
$(this).attr('class','active');
});});
</script>
作品!
たちはjQueryの見ることができます:各サブタブ/ウィンドウ/チャットボックス)に
だからあなたのようなものを持っているでしょうか? – Connor