php - 底部固定 div 的 JQuery 切换将所有 div 向上移动

Question

我正在使用 node JS，我们建立了一个完美的聊天，现在我们正在转向它的 CSS 部分。

现在我遇到的问题是，当我们有多个选项卡时，我们只点击一个，所有选项卡都会向上移动。

这可以在下图中查看。 红色区域是选项卡所在的 div，显示它们应该能够用CSS向下移动

之前

单击 1 个选项卡后

再次单击选项卡以向您显示我的 jQuery 部分正确

这是一个位于页面底部的固定 div

以下代码针对每个选项卡重复，但具有不同的 ids、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 是问题所在，我不确定。

解决方案

<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 的高度.解决它的一种方法是在 div 上设置一个 em 单位高度，同样设置扩展大小，这样您就可以控制 margin-top like this .

我在这里假设您的 fixed div 不会真的有红色背景，但实际上是透明的(红色是为了说明)。如果不是这样，那么您需要使每个元素单独成为一个固定位置，但是您将无法 float 它们。