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问题引起的，其中您的位置已通过使用位置进行了更改：;属性。如果您的位置是绝对的或固定的（在W3C上查看），它们不会影响页面的流量。你还需要考虑z-index，因为绝对位于最高水平，固定第二高，相对第三高，静态最低。

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

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

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

Answer 2

试试这个

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

Answer 3

是的，这个问题是因为只有css。你的＃paragraph-toggle应该是position：relative而不是position：absolute fixed

jQuery slideToggle（）重叠页脚

3 个答案: