使用 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 {

    display: none;

}

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

document.getElementById("radios1").addEventListener("click", function(){

    document.getElementById("eu_listing").classList.remove('d-none')

});