jQuery切换设置显示的值与最初设置的值不同

Question

我想要通过.toggle( )显示和隐藏label。该标签有一个类.hidden，默认情况下会将其设置为display: none;。它还有其他CSS：

label { 
  color: #4d4d4d;
  cursor: pointer;
  display: block;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.5;
}

出于某种原因，当我点击切换事件处理程序时，标签会显示，但是display: inline;，这是我不想要的，因为我将其设置为block 。仅当标签设置为display: none;时，才会发生此行为。如果标签默认可见，则按预期工作。我有机会切换到CSS设定值吗？

请注意，我想使用.toggle()而不是.toggleClass()或类似的。

Answer 1

切换为标签inline提供默认显示值。您可以在jquery中隐藏标签以获得适当的结果。

  

匹配的元素将立即显示或隐藏，没有   动画，通过更改CSS显示属性。如果元素是   最初显示，它将被隐藏;如果隐藏，它将被显示。   将根据需要保存和还原display属性。如果一个元素   具有内联的显示值，然后隐藏并显示，它将一次   再次以内联方式显示。

$("label").hide();
$("div").click(function() {
  $("label").toggle();
});

label { 
  color: #4d4d4d;
  cursor: pointer;
  display: block;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label>test label</label>

<div>toggle label</div>

参考：.toggle() - MDN - Inline elements。