隐藏的内容进入页脚

Question

使用 jquery show/hide 显示我的 display:none; 隐藏内容时遇到问题。当我显示隐藏内容时，它会进入我的页脚，因为我的 position:relative; 父 .wrapper 不知道 position:absolute; 子 #learninfo #promoteinfo``#networkinfo #performinfo 的高度。当屏幕显示较大时（如 macbook pro 的正常窗口大小），这没问题，但屏幕越小，进入我的页脚的文本越多，如果文本超过<footer>，甚至在下面。我正在使用的代码是（我确实使用了一些基础 + SASS）

HTML

<ul class="idm-mission">
        <h2>
        <li id="learn">LEARN</li>
        <li> | </li>
        <li id="promote">PROMOTE</li>
        <li> | </li>
        <li id="network">NETWORK</li>
        <li> | </li>
        <li id="perform">PERFORM</li>
        </h2>
      </ul>
    <div class="wrapper">
      <div id="learninfo">
        <div class="row">
          <div class="large-12 columns">
            <p></p>
          </div>
        </div>
      </div>
      <div id="promoteinfo">
        <div class="row">
          <div class="large-12 columns">
            <p></p>
          </div>
        </div>
      </div>
      <div id="networkinfo">
        <div class="row">
          <div class="large-12 columns">
            <p></p>
          </div>
        </div>
      </div>
      <div id="performinfo">
        <div class="row">
          <div class="large-12 columns">
            <p></p>
          </div>
        </div>
      </div>
    </div>
  <!-- End of content -->
<!-- footer html below -->
<footer>
</footer>

CSS

.wrapper {
    position: relative;
    padding-bottom: 50px;
}
#learninfo,#promoteinfo,#networkinfo,#performinfo {
    display: none;
    position: absolute;
    color: #fcb702;
    width: 100%;
}
#learn:hover,#promote:hover,#network:hover,#perform:hover {
    color: $primary-color;
}
footer {
    color: #fff;
    padding: 10px 0;
    margin-top: rem-calc(100px);
    text-align: left;
}

jQuerY

// Learn information display 
$("#learn").hover(function (e) {
//This funciton defines what happens on mouse-in or ho
$("#learninfo").show();



}, function (e) {
//This function defines what happens on mouse-out or when the hover is over.
$("#learninfo").hide();

});



// Promote information display 
$("#promote").hover(function (e) {
//This funciton defines what happens on mouse-in or ho
$("#promoteinfo").show();


}, function (e) {
//This function defines what happens on mouse-out or when the hover is over.

$("#promoteinfo").hide();

});



// Network information display 
$("#network").hover(function (e) {
//This funciton defines what happens on mouse-in or ho
$("#networkinfo").show();


}, function (e) {
//This function defines what happens on mouse-out or when the hover is over.

$("#networkinfo").hide();

});



// Perform information display 
$("#perform").hover(function (e) {
//This funciton defines what happens on mouse-in or ho
$("#performinfo").show();


}, function (e) {
//This function defines what happens on mouse-out or when the hover is over.

$("#performinfo").hide();

});

Answer 1

发生这种情况是因为您在 wrapper 的子 div 中指定了新的位置规则。让子 div 继承 wrapper div 的位置

.wrapper {
    position: relative;
    padding-bottom: 50px;
}
#learninfo,#promoteinfo,#networkinfo,#performinfo {
    display: none;
    position: inherit;
    color: #fcb702;
    width: 100%;
}

Answer 2

替换这部分 CSS 就可以了：

#learninfo,#promoteinfo,#networkinfo,#performinfo {
    visibility:hidden;
    position: relative;
    color: #fcb702;
    width: 100%;
}

发生这种情况的原因：

绝对定位的元素不会被考虑到父relative内容的高度计算中，因此最好使用position:relative;将其纳入计算。

display:none; 从字面上隐藏了代码中的元素，因此它不能计算到父元素的高度，所以使用visibility:hidden; 只是让它对用户不可见并且仍然在计算中被考虑。

附：当您使用它时，请替换 jQuery 的这些部分：

$("#learninfo").show();

与：

$("#learninfo").css('visibility','visible');

和

$("#learninfo").hide();

与：

$("#learninfo").css('visibility','hidden');

对于其他 show() 和 hide() 函数也是如此。

更新：

如果你不想显示空间，那么你只需要将位置更改为相对，参见工作示例 => http://jsfiddle.net/G64Bs/1/

如果您明确想要使用absolute 位置，那么您需要使用 jQuery 控制父 div 的高度，您必须在此处提出另一个问题，或者查看网上的其他示例。

Answer 3

你应该试试下面的代码（用于此目的的 jQuery 代码）

 $("SelectelementByIDClassOrOTHER").css("display","inline");//first select your require element and set css as inline or block according to your need.
     $("SelectelementByIDClassOrOTHER").css("display","block");//