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

回答

相关问题