使用 js 将“显示：无”变为“显示：阻止”，使所有 div 发生碰撞

Question

我有一些无线电输入，当其中一个被点击时，会出现一个充满一些信息的 div（它已经显示：没有，点击后会变成阻止）。我在页面末尾有一个页脚。当我点击收音机时，div 出现但它与页脚碰撞，我希望它留在页脚和收音机之间，但页脚在收音机后停留并与出现的 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 {&nbsp; &nbsp; display: none;}然后在 JS 中，您可以根据需要添加和删除类，而不是将其更改为 display: blockdocument.getElementById("radios1").addEventListener("click", function(){&nbsp; &nbsp; document.getElementById("eu_listing").classList.remove('d-none')});