在按钮按下时隐藏并显示div

Question

我有一个JavaScript函数，可根据click事件隐藏和显示div。

它的效果很好，但是每次显示div时，它都会扩展整个英雄区域，即英雄图像， h1文本。 所以一切都随着扩展而跳跃

我需要显示隐藏的div，在不单击该按钮后显示隐藏的div的情况下，在不使背景图像和h1标签位于同一部分的情况下展开卡，以不进行扩展和增加尺寸。

您可以在此链接上尝试： https : //micencostagebank.nl/index_september.php

只需单击两次舞台按钮，您就会明白我的意思。

 function displayCheckBox() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "inline"; } else { x.style.display = "none"; } } 

 <div id="myDIV"> <div class="form-check form-check-inline"> <input class="btn btn-primary" type="radio" name="traineeship_type" id="10weeks" value="4"> <label class="btn form-check-label" for="inlineRadio1">Beroeporiënterende stage</label> </div> <div class="form-check form-check-inline"> <input class="btn btn-primary" type="radio" name="traineeship_type" id="20weeks" value="5"> <label class=" btn form-check-label" for="inlineRadio2">Beroepsvoorbereidende stage</label> </div> </div> 

Answer 1

使用可见性而不是显示性，为mydiv DOM创建的空间将无法清除，也不会再发生混乱，我也在您的站点中进行了测试。

not to show  : visibility: hidden;
to show      : visibility: visible;

如果您不想像上面提到的那样，那么我的建议是使按钮右侧的文本位于baan按钮旁边，并使位置绝对地向左和向上调整并减小字体，如下所示。