JQuery底部固定div切換向上移動所有div

我正在使用節點JS，並且我們構建了一個完美的聊天工具，現在我們正在轉移到它的CSS部分。JQuery底部固定div切換向上移動所有div

現在我現在遇到的問題是，當我們有多個選項卡，並且我們只點擊一個選項卡時，所有選項卡都會向上移動。

這可以在下面的圖片中查看。紅色區域是div該選項卡中顯示，他們應該能夠與CSS 1片

上向下移動

前

後點擊後再點擊一個標籤向你展示我的jQuery部分正確

This是一個固定的div如所示的圖像在頁面

下面此代碼被重複用於每個標籤的底部，但具有不同的ID，tramsTalk，Calvin，srcc-test坐着。

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

就像一個魅力！

來源

2012-04-26 LukePOLO

我們可以看到jQuery的？ – Connor 2012-04-26 23:59:02

雖然你指出，「下面這段代碼重複爲每個標籤，但有不同的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（爲了說明的目的，我縮小了寬度）。您單擊並展開一個的高度和get something like this。解決這個問題的一種方法是在div上設置一個em單位高度，並同樣設置擴展尺寸，這樣就可以控制margin-toplike this。

我在這裏假設你的fixed div並不真的會有紅色的背景，但實際上將是透明的（紅色是爲了說明）。如果情況並非如此，那麼您需要將每個元素分別設置爲fixed的位置，但是您將無法將它們設置爲float。

來源

2012-04-27 01:05:11 ScottS

看起來是一個好主意，試試吧！ – LukePOLO 2012-04-27 12:59:13

所以這工作有點，因爲某些原因，我可以靜態設置，它的工作原理，但是當使用jquery添加類時，它仍然以相同的方式移動，生病後，當我得到更多的東西，但這是正確的答案。 – LukePOLO 2012-04-27 13:47:34

發現爲什麼，我有一個CSS風格重寫固定！重要; – LukePOLO 2012-04-27 14:03:00

我認爲你不需要調整持有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>

來源

2012-04-27 02:28:07

可悲的嘗試了這一點，沒有工作:-( – LukePOLO 2012-04-27 12:59:00

JQuery底部固定div切換向上移動所有div

回答

相關問題