两段之间的差距如何,如何删除它？ - Javascript或Jquery

Question

我是一名新手php程序员,只对编程有所了解.我正在尝试开发一个职位门户系统,用户可以在其中填写信息以找到工作.我现在的问题非常小,但这是我想做的一个小小的改变.以前,我没有把就业历史的部分,但现在我做了.用户可以选择他们是经验丰富的还是刚毕业的.如果他们有经验,将会显示一个表格,以便他们填写表格.

现在问题是,表单是隐藏的,但它在Employement 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>

我根据单击按钮在表单中找到的代码尝试此代码

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

Answer 1

在CSS中,visibility: hidden只使元素不可见,但它仍占用空间.

在您的JavaScript代码中,使用display-property代替,这将完全隐藏元素:

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