javascript - 两节缝隙大怎么去掉呢？ - Javascript 或 Jquery

Question

我是一名PHP 程序员新手，对编程了解甚少。我正在尝试开发一个工作门户系统，用户可以在其中填写信息以找到工作。我现在的问题很小，但这是我想做的一个小改变。以前，我没有输入Employment History 部分，但现在我输入了。用户可以选择他们是有经验的还是刚毕业的。如果他们有经验，将显示一个表格，以便他们填写表格。

现在的问题是，表格是隐藏的，但它在就业历史和其他部分之间留下了巨大的空白。 我读过其他类似的问题，但找不到正确的解决方案。谁能指导我如何消除差距？

源代码:

function yesnoCheck() {
  if (document.getElementById('yesCheck').checked) {
    document.getElementById('ifYes').style.visibility = 'visible';
  } else document.getElementById('ifYes').style.visibility = 'hidden';

}

<label> Have you worked before?</label> <br>


<label for="yesCheck">Experienced Employee</label>
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> <br>
<label for="noCheck">Fresh Graduate</label> <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br>
<div id="ifYes" style="visibility:hidden">

  <p> Please describe your employement history, listing the most recent position first</p>

  <div>
    <p>1</p>
    <div class="form-group">
      <input class="form-control" id="emp1" name="emp1" placeholder="Employer"></input>
    </div>

    <div class="form-group">
      <input class="form-control" type="text" id="pos1" name="pos1" placeholder="Position">
    </div>

    <div class="form-group">
      <input class="form-control" type="text" id="date1" name="date1" placeholder="Dates [From-To]">
    </div>

    <div class="form-group">
      <input class="form-control" type="text" id="reason1" name="reason1" placeholder="Reasons for Leaving">
    </div>
  </div>


  <div>
    <p>2</p>
    <div class="form-group">
      <input class="form-control" id="emp2" name="emp2" placeholder="Employer"></input>
    </div>

    <div class="form-group">
      <input class="form-control" type="text" id="pos2" name="pos2" placeholder="Position">
    </div>

    <div class="form-group">
      <input class="form-control" type="text" id="date2" name="date2" placeholder="Dates [From-To]">
    </div>

    <div class="form-group">
      <input class="form-control" type="text" id="reason2" name="reason2" placeholder="Reasons for Leaving">
    </div>

  </div>


  <div>
    <p>3</p>
    <div class="form-group">
      <input class="form-control" id="emp3" name="emp3" placeholder="Employer"></input>
    </div>

    <div class="form-group">
      <input class="form-control" type="text" id="pos3" name="pos3" placeholder="Position">
    </div>

    <div class="form-group">
      <input class="form-control" type="text" id="date3" name="date3" placeholder="Dates [From-To]">
    </div>

    <div class="form-group">
      <input class="form-control" type="text" id="reason3" name="reason3" placeholder="Reasons for Leaving">
    </div>

  </div>
</div>

我根据在 Write in a form by clicking on a button 上找到的代码尝试此代码

提前感谢您的指导和帮助。

Answer 1

在CSS中，visibility: hidden只是让元素不可见，但仍然占用空间。

在您的 JavaScript 代码中，改用 display 属性，这将完全隐藏元素:

function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.display= 'block';
    } else document.getElementById('ifYes').style.display= 'none';
}