使用 js 进行"display: none" "display: block"，使所有 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

您可以添加 d-none 类或类似类来默认隐藏的对象，而不是直接修改元素的 CSS 样式。

.CSS

.d-none {
    display: none;
}

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

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

Answer 2

ok 设法通过使页脚位置：相对然后获取显示div 的高度并将该数量添加到 top： 值来修复它，因此页脚会根据出现div 的大小而变低。

document.getElementById("radios1").addEventListener("click", function(){
document.getElementById("eu_listing").style.display = "block";
document.getElementById("footer").style.top = dheight+"px";
});

Answer 3

首先，您需要在 <script></script> 标签内编写脚本。

接下来，这个div 最初需要显示 none。
<div id="eu_listing" style="display:none">

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

<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" style="display:none">
    <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>