jQuery slideToggle(） 重叠页脚

jQuery slideToggle() overlapping footer

本文关键字：重叠 slideToggle jQuery      更新时间：2023-09-26

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

这是由 CSS 问题引起的，其中您的元素的位置已通过使用 position：; 属性进行了更改。如果你有位置是绝对或固定的元素（在W3C上查找），它们不会影响页面的流动。您还需要考虑 z 指数，因为绝对值位于最高水平，固定为第二高，相对值为第三高，静态值为最低。

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

流量也可能受到偏移（上/左/右/下）和边距（尤其是偏移）的影响。动画完成后，在Firebug或Chrome检查器中与它们一起玩。

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

试试这个

 //application.js
$(".button").click(function(){
var contentText = $(this);
$("#paragraph-toggle").slideToggle(1500,"linear", function(){
if ($(this).is(":visible")) {
    contentText.text("HIDE");
    $("#footerID").hide();  //hide footer when paragraph is shown
}else {
    contentText.text("VIEW");
    $("#footerID").show();// show footer when paragraph is hide
};
 });
});

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

是的，这个问题是因为只有 css。您的 #paragraph 切换应该是位置：相对而不是位置：绝对固定

相关文章：