Question

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

HTML

SASS

CSS

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

JQUERY

.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;
}

Answer 1

替换你的这部分CSS，你很高兴：

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

发生这种情况的原因：

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

display:none;从字面上隐藏了代码中的元素，因此无法将其计算为父级的高度，因此请使用visibility:hidden;来仅使其对用户不可见，并且仍在考虑中计算。

P.S。当你在它的时候，替换jQuery的这些部分：

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

使用：

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

和

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

使用：

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

和其他show()和hide()函数相同。

<强>更新

如果您不想显示空格，那么您只需要将位置更改为相对位置，请参阅工作示例=＆gt; http://jsfiddle.net/G64Bs/1/

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

Answer 2

这种情况正在发生，因为您在包装器的子div中指定了一个新的位置规则。让子div从包装div继承位置

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

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");//

隐藏的内容进入页脚

3 个答案: