更改选择选项时，div 会更改其边距

Question

$('#seltags').change(function() {
  var obj = $('#' + $(this).val());
  $('.txtags').hide();
  obj.show();
});

.seltags {
  display: block;
  padding: 1px 7px;
  width: 100%;
}

.txtags {
  display: block;
  width: 100%;
  padding: 5px 9px;
  outline: none;
  border: 1px solid #999;
  border-radius: 9px;
  resize: none;
  overflow-y: scroll;
  margin-top: 13px;
  text-transform: uppercase;
}

.tagsimg {
  display: none;
}

.divbottom {
  height: 14px;
  background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
  <option value='tagsart'>TAGS ARTICLES</option>
  <option value='tagsimg'>TAGS IMAGES</option>
</select>

<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>

<div class='divbottom'></div>

divbottom 在seltags 更改为第二个选项时获得一个上边距（大约五个像素），并在返回到第一个选项时失去该边距。

谁能帮我看看这里出了什么问题？

谢谢。

Answer 1

The margin appears because when the select box is changed and the second option is chosen, the text area that was hidden now gets display: inline-block; to show it, and the offset from being hidden causes the margin jump.

尝试将vertical-align: middle; 添加到.txtags 类元素的样式中。

$('#seltags').change(function() {
  var obj = $('#' + $(this).val());
  $('.txtags').hide();
  obj.show();
});

.seltags {
  display: inline-block;
  padding: 1px 7px;
  width: 100%;
}

.txtags {
  display: inline-block;
  width: 100%;
  padding: 5px 9px;
  outline: none;
  border: 1px solid #999;
  border-radius: 9px;
  resize: none;
  overflow-y: scroll;
  margin-top: 13px;
  text-transform: uppercase;
  vertical-align: middle;
}

.tagsimg {
  display: none;
}

.divbottom {
  height: 14px;
  background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
  <option value='tagsart'>TAGS ARTICLES</option>
  <option value='tagsimg'>TAGS IMAGES</option>
</select>

<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>

<div class='divbottom'></div>

Answer 2

出现边距，因为选择第二个选项时， #tagsimg element @ element display: inline-block inline样式。
要删除此边距，您需要将 vertical-align: middle 添加到 #tagsimg 元素的样式中，或者找出添加 display: inline-block 的原因并进行更改。
您可以在 StackOverflow 问题中了解 jQuery 这样做的原因以及如何避免它：jQuery .show() adds style="display:inline-block" to elements

Answer 3

这不是边距，而是您显示和隐藏的 textarea ( .txtags ) 将它向下推了一点，因为当它显示时它得到 display:inline-block ，

添加.obj.show().css({'display': 'block'});，这样两个文本区域的行为相同

$('#seltags').change(function(){
	var obj = $('#' + $(this).val());
	$('.txtags').hide();
	obj.show().css({'display': 'block'});
});

.seltags{
	display:block;
	padding:1px 7px;
	width:100%;
}

.txtags{
	display:block;
	width:100%;
	padding:5px 9px;
	outline:none;
	border:1px solid #999;
	border-radius:9px;
	resize:none;
	overflow-y:scroll;
	margin-top:13px;
	text-transform:uppercase;
}

.tagsimg{
	display:none;
}

.divbottom{
height:14px;
background:gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
<option value='tagsart'>TAGS ARTICLES</option>
<option value='tagsimg'>TAGS IMAGES</option>
</select>

<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>

<div class='divbottom'></div>

Answer 4

我不知道为什么，但div.divbottom 根本没有得到任何边距或填充。问题是当您显示.tagsimg 时，它会得到display: inline-block 而不仅仅是block，这是.txtags 的初始状态。让 .tagsimg 被 jQuery 隐藏，而不是以 display:none 开头，使得 jQuery 在显示修复它时将其更改为 display:inline-block。

$('#seltags').change(function(){
	var obj = $('#' + $(this).val());
	$('.txtags').hide();
	obj.show();
});

$('.tagsimg').hide();

.seltags{
	display:block;
	padding:1px 7px;
	width:100%;
}

.txtags{
	display:block;
	width:100%;
	padding:5px 9px;
	outline:none;
	border:1px solid #999;
	border-radius:9px;
	resize:none;
	overflow-y:scroll;
	margin-top:13px;
	text-transform:uppercase;
}

.tagsimg{
	display:block;
}

.divbottom{
height:14px;
background:gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
<option value='tagsart'>TAGS ARTICLES</option>
<option value='tagsimg'>TAGS IMAGES</option>
</select>

<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>

<div class='divbottom'></div>

Answer 5

两个文本区域都应该是 inline-block 或 block 它是导致行为的两者的混合

Answer 6

您的第一个文本区域显示为block。
但这里的诀窍是，当您让第二个文本区域出现时，它会显示为 inline-block。

建议您使用inline-block 或删除该属性。
这是与其他一些 cmets 一起工作的 sn-p：

// Optimized function
$('#seltags').change(function() {
  $('.txtags').hide();
  $('#' + $(this).val()).show();
});

.seltags {
  display: block;
  padding: 1px 7px;
  width: 100%;
}

.txtags {
  /* display: inline-block; /* Here is what I changed! */
  width: 100%;
  padding: 5px 9px;
  outline: none;
  border: 1px solid #999;
  border-radius: 9px;
  resize: none;
  overflow-y: scroll;
  margin-top: 13px;
  text-transform: uppercase;
}

.hidden { /* Changed name */
  display: none;
}

.divbottom {
  height: 14px;
  background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
  <option value='tagsart'>TAGS ARTICLES</option>
  <option value='tagsimg'>TAGS IMAGES</option>
</select>
<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags hidden' id='tagsimg' rows="5"></textarea>
<div class='divbottom'></div>

顺便说一句，我不明白为什么您的第二个textarea 显示为inline-block。

这是show() 文档的摘录：
“匹配的元素将立即显示，没有动画。这大致相当于调用 .css("display", "block")，除了 display 属性恢复到最初的样子。如果一个元素的显示值为 inline，然后被隐藏并显示，它将再次被显示为 inline。” （链接：http://api.jquery.com/show/）