javascript - jQuery 切换设置显示为与初始设置不同的值

Question

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

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

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

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

Answer 1

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

The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

$("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 .