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

Posted

技术标签:

【中文标题】底部固定 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,tramsTalkCalvinsrcc-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>

【讨论】:

以上是关于底部固定 div 的 JQuery 切换将所有 div 向上移动的主要内容,如果未能解决你的问题,请参考以下文章

html 里面 div 滚动条保持在底部 及 div 位置固定。

jquery 移动面板的固定页脚

到达页面底部后更改固定定位元素的边距顶部位置?

html页面有两个上下排列的div,头部div的高度为固定的,底部div的高度是随着浏览器窗口高度改变而改变。

如何使用 jQuery 将 div 的滚动条保持在 div 的底部?

固定导航上所有div上方的Jquery滑块