javascript - jQuery SlideToggle() 重叠页脚

Question

我的 HTML 页面上隐藏了一个段落。单击按钮时，它通过 jQuery SlideToggle() 显示它。但是，当我切换段落时，它会与底部的页脚重叠。如何防止这种情况发生并在切换(显示)段落时将页脚向下推？

application.js

$(".button").click(function(){
    var contentText = $(this);
$("#paragraph-toggle").slideToggle(1500,"linear", function(){
    if ($(this).is(":visible")) {
        contentText.text("HIDE");
    }else {
        contentText.text("VIEW");
    };
  });
});

index.html

<button>VIEW</button>
<div id="paragraph-toggle">
    <div>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elite</p>
    </div>
</div>
<footer>
</footer>  

Answer 1

这是由 CSS 问题引起的，其中元素的位置已通过使用position:; 进行了更改。属性(property)。如果您的元素的位置是绝对或固定的(在 W3C 上查找)，它们不会影响页面的流程。您还需要考虑 z-index，因为绝对位于最高级别，固定为第二高，相对为第三高，静态为最低。

如果元素以错误的顺序相互 float ，请查看元素的位置、它们是否具有溢出设置以及 z 索引是什么。

流量也会受到偏移(上/左/右/下)和边距(尤其如此)的影响。动画完成后，在 Firebug 或 Chrome 检查器中使用它们。

您还可以调试 jQuery animate 函数，以查看在动画处理时相关元素上设置了哪些 CSS 属性。然后您可以更改样式以覆盖 jQuery 正在应用的一些设置。