Question

所以我有以下代码设置，以便当且仅当用户检查其他时，然后＆＃34;如果其他框＆＃34;显示。这样做会在隐藏框时留下空白空间。无论如何，当取消选中此框并将内容向下滚动并添加＆＃34;如果其他框＆＃34;当选中其他框时。

以下是以下工作代码

＆＃13;

    $('#other').on('click', function() {
      if ($(this).is(':checked')) {
        $('.otherCon').css('visibility', 'visible');
      } else {
        $('.otherCon').css('visibility', 'hidden');
      }
    });

＆＃13;

.otherCon {
  visibility: hidden;
}
label {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div class="userCheck">
    <input type="checkbox" id="other" name="Other" value="Other" />
    <label>Other</label>
  </div>
  <div class="otherCon">
    <label>If other</label>
    <textarea id="text" name="Other Response"></textarea>
  </div>
  <div>
    <label>More info</label>
    <textarea id="text" name="More info"></textarea>
  </div>

＆＃13;

Answer 1

使用display: none代替。这隐藏了元素而没有任何空间。 jQuery具有函数hide（），show（）和toggle（）以使其更容易

Answer 2

visibility和opacity只是使元素透明但不要让它们消失。为此，您需要将display设置为none。甚至更好，因为您正在使用jQuery，.show()和.hide()。

$('#other').on('click', function() {
    if ($(this).is(':checked')) {
        $('.otherCon').show();
    } else {
        $('.otherCon').hide();
    }
});

或者，因为您使用条件，只需使用.toggle()：

$('#other').on('click', function() {
    $('.otherCon').toggle($(this).is(':checked'));
});

工作示例：

＆＃13;

$('#other').on('click', function() {
    $('.otherCon').toggle($(this).is(':checked'));
});

＆＃13;

.otherCon {
  display: none;
}
label {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="userCheck">
  <input type="checkbox" id="other" name="Other" value="Other" />
  <label>Other</label>
</div>
<div class="otherCon">
  <label>If other</label>
  <textarea id="text" name="Other Response"></textarea>
</div>
<div>
  <label>More info</label>
  <textarea id="text" name="More info"></textarea>
</div>

＆＃13;

Answer 3

您可以将hidden属性div用于otherCon类，并将jquery更改为使用show()或hide()或删除{{1并添加if

$('.otherCon').toggle();

    $('#other').on('click', function() {
      //$('.otherCon').toggle();
      if ($(this).is(':checked')) {
        $('.otherCon').show();
      } else {
        $('.otherCon').hide();
      }
    });

Answer 4

设置visibility时，该元素只是“不可见”＆＃39;但是仍然需要空间来放置它，你可能想要使用jQuery的fadeOut和fadeIn，slideUp和slideDown来真正隐藏元素并且也可以摆脱它他们的动画空间。您也可以将display属性更改为none或block以简单方式隐藏

$('#other').on('click', function() {
 if ($(this).is(':checked')) {
  $('.otherCon').slideDown();
 } else {
   $('.otherCon').slideUp();
 }
});

您还可以使用<label for="checkbox id"/>切换checked复选框状态，方法是点击标签文字

在https://jsfiddle.net/8qqLmyad/1/

上试试

占用空间的隐藏文本区域

4 个答案: