使用 jQuery 切换 2 个元素的可见性

Toggle visibility of 2 elements with jQuery

本文关键字：元素 可见性 jQuery 切换 使用      更新时间：2023-09-26

function clickMe() {
  $('.hidden').toggle();
  $('.visible').toggle();
}
.hidden {
  visibility: hidden
}
.visible {
  visibility: visible
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class='hidden'>HiddenLabel</label>
<label class='visible'>VisibileLabel</label>
<button onClick='clickMe()'>Click me</button>

这适用于可见标签，但不适用于隐藏标签，因为它切换了"可见标签"的可见性

，但"隐藏标签"的可见性保持不变（隐藏）。

您正在尝试交换类，而不是可见性。您应该使用.toggleClass：

function clickMe() {
  $('.hidden, .visible').toggleClass("hidden visible");
}

片段

function clickMe() {
  $('.hidden, .visible').toggleClass("hidden visible");
}
.hidden {
  visibility: hidden
}
.visible {
  visibility: visible
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class='hidden'>HiddenLabel</label>
<label class='visible'>VisibileLabel</label>
<button onClick='clickMe()'>Click me</button>

原因是，函数本身.toggle()可以完成您尝试做的事情，但现在您需要切换类而不是元素。

jQuery.toggle()更改 css 属性display。

而不是 css 属性visibility.

请尝试：

.hidden {
    display: none;
}
.visible {
    display: block;
}
相关文章：