下の固定divのJQueryトグルがすべてのdivを上に移動

Question

私はノードJSを使って作業しています。完全に動作するチャットを作成しました。

今私が気づいている問題は、複数のタブがあり、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> 

作品！

Answer 1

あなたは「下のこのコードは、各タブのためではなく、異なるIDで繰り返される」とこれを与えると述べているものの：

私の推測では、私はあなたのイメージや行動あなたから見たものに基づいています

<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> 

状態は、あなたが本当にこれを持っている（私は、説明の目的のためにガッツなくしました）：

ある

<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> 
    <div id="sccr_test_chat" style="background-color:white;position:relative;bottom:0px;width:275px;float:right"> 
    </div> 
    <div id="Calvin_chat" style="background-color:white;position:relative;bottom:0px;width:275px;float:right"> 
    </div> 
</div> 

、fixed位置のdivは、それぞれについて繰り返されていないが、実際にはそれらすべてをラップします。そうであれば、あなたが経験する振る舞いは、私が期待するものです。ひとたびタブが拡大されると、固定されたdivの高さが拡大し、すべての見出しが上に移動するからです。 You start with something like this（説明のため幅を狭めました）。 1つの高さをクリックして展開し、get something like thisとします。おそらくそれを解決する1つの方法は、em単位の高さをdivに設定し、同様に拡大したサイズに設定して、margin-toplike thisを制御できるようにすることです。

あなたのfixed divは実際には赤い背景を持たないと仮定していますが、実際は透明であることになります（赤はイラスト用です）。そうでない場合は、各要素を個別にfixedの位置にする必要がありますが、その後はfloatにはアクセスできません。

Answer 2

保持div内のどのサブタブでも位置を調整する必要はないと思います。それらの位置は保持divの位置によって決めることができるからです（または少なくともvertical-align: bottom

<div style="position: fixed; bottom: 0; right: 26px; background-color:red"> 
    <div id="tramsTalk_chat" style="vertical-align: bottom"> 
    </div> 
    <div id="sccr_test_chat" style="vertical-align: bottom"> 
    </div> 
    <div id="Calvin_chat" style="vertical-align: bottom"> 
    </div> 
</div>