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

显示边距是因为选择第二个选项后，#tagsimg元素将获得display: inline-block内联样式。
要删除此边距，您需要将vertical-align: middle添加到#tagsimg元素的样式中，或找出添加display: inline-block的原因并进行更改。
您可以阅读jQuery为什么这样做，以及如何在StackOverflow问题中避免它：jQuery .show() adds style="display:inline-block" to elements

Answer 2

它不是一个保证金，而是显示和隐藏的textarea（.txtags），当它显示为display:inline-block时会将其推迟一点，

添加.obj.show().css({'display': 'block'});，以便两个textareas表现相同

$('#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 3

我不知道为什么，但div.divbottom根本没有任何边距或填充。问题在于，当您显示.tagsimg时，display: inline-block正在block而不仅仅是.txtags，这是.tagsimg的初始状态。使display:none被jQuery隐藏而不是以display:inline-block开头，使jQuery在显示时将其更改为$('#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>

outcome = 20 * my_series

Answer 4

两个textareas应该是inline-block或block，它是导致行为的两个混合

Answer 5

出现边距是因为当更改选择框并选择第二个选项时，现在隐藏的文本区域将显示display: inline-block;以显示它，并且隐藏的偏移会导致边距跳跃。

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 6

您的第一个textarea显示为block 但这里的诀窍是当你出现第二个textarea时，它显示为inline-block。

我建议您使用inline-block或删除该属性这是一个包含其他一些评论的工作片段：

// 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属性恢复到最初的状态。如果元素的显示值为内联，则隐藏并显示，它将再次以内联方式显示。“ （链接：http://api.jquery.com/show/）

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

6 个答案: