하단 고정형 div의 JQuery 토글은 모든 div를 위쪽으로 이동합니다.

Question

노드 JS와 함께 작업하고 있으며 완벽하게 작동하는 채팅을 구축했으며 이제는 CSS 부분으로 이동하고 있습니다.

지금 제가 당면한 문제는 여러 개의 탭이 있고 하나만 클릭하면 모든 탭이 위로 이동한다는 것입니다.

이것은 아래 이미지에서 볼 수 있습니다. 빨간색 영역은 탭이 그들이 할 수 있어야 보여주는에있는 div이 후 1 개 탭

에

클릭 후

전에 CSS 아래로 이동하는 것입니다 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가 문제라고 생각한다. 나는 확신 할 수 없다.

솔루션

마법처럼

<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입니다. 아마도 그것을 해결하는 한 가지 방법은 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>