javascript - 用js制作一个 "display: none"到 "display: block"，让所有div碰撞

Question

我有一些 radio 输入，当其中一个被点击时，会出现一个充满一些信息的 div(它已经显示:没有，点击后会变成阻塞)。 我在页面末尾下方有一个页脚。 当我点击 radio 时，div 出现但它与页脚碰撞，我希望它留在页脚和 radio 之间但页脚停留在 radio 之后并与出现的 div 碰撞!

我真的不知道怎么解决。

document.getElementById("radios1").addEventListener("click", function() {
  document.getElementById("eu_listing").style.display = "block";
});

#eu_listing {
  display: none;
}

<div class="form-check-inline mr-3">
  <label class="form-check-label">
                <input type="radio" id="radios1" class="form-check-input" name="optradio">EU
            </label>
</div>

<div id="eu_listing">
  <h1>Sorry, Currently we are out of Stock!</h1>
</div>

<div class="container-fluid px-0 bg-dark">
  <div class="container myfooter text-center">
    <div class="row">
      <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 px-1 text-center mb-2">
        <a href="">ABOUT</a>
      </div>
      <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 px-1 text-center mb-2">
        <a href="">TERMS</a>
      </div>
      <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 px-1 text-center mb-2">
        <a href="">FAQ</a>
      </div>
      <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 px-1 text-center mb-2">
        <a href="">SELL WITH US</a>
      </div>
      <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 px-1 text-center mb-2">
        <a href="">PRIVACY</a>
      </div>
      <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 px-1 text-center mb-2">
        <a href="">ADVERTISING</a>
      </div>
    </div>
    <hr class="footer_divider">
    <h3>CONNECT WITH US</h3>
    <div class="my-4">
      <a href=""><img class="socialpics" src="../Images/fb.png" alt=""></a>
      <a href=""><img class="socialpics" src="../Images/insag.png" alt=""></a>
      <a href=""><img class="socialpics" src="../Images/twit.png" alt=""></a>
    </div>
    <p>© 2019 asfaf</p>
  </div>
</div>

我希望它能将页脚向下推到所需的空间，但它根本没有移动页脚!

Answer 1

除了直接修改元素的 CSS 样式外，您还可以添加一个类 d-none 或类似于您要默认隐藏的对象。

CSS

.d-none {
    display: none;
}

然后在 JS 中，您可以根据需要添加和删除类，而不是将其更改为 display: block

document.getElementById("radios1").addEventListener("click", function(){
    document.getElementById("eu_listing").classList.remove('d-none')
});