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

Posted 2023-03-07

【中文标题】底部固定 div 的 JQuery 切换将所有 div 向上移动

【英文标题】：JQuery toggle of a bottom fixed div moves all divs upwards

【发布时间】：2012-05-07 18:01:12

【问题描述】：

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

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

这可以在下面的图片中查看。红色区域是标签所在的div，表明它们应该能够向下移动CSS

之前

点击 1 个标签后

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

这是位于页面底部的固定 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 是问题所在，我不确定。

解决方案

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

像魅力一样工作！！！

【参考方案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 不会真正具有红色背景，但实际上将是透明的（红色是为了说明）。如果不是这样，那么您需要将每个元素单独设置为 fixed 位置，但是您将无法 float 它们。

【讨论】：

所以这有点工作，出于某种原因我可以静态设置它并且它可以工作但是当使用 jquery 添加类时它仍然以相同的方式移动，当我得到进一步的东西时会发帖但这是正确的回答。

找出原因，我有一个用 !important 固定的 css 样式；

@user1212047--很高兴它成功了，并且你解决了你的特定错误。

【参考方案2】：

我认为您不需要调整控股 div 中任何子选项卡的位置，因为它们的位置可以由控股 div 的位置决定..（或者至少放一个 @987654321 @ 在每个子选项卡/窗口/聊天框上）

所以你会有类似的东西：

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