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

Question

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>

这适用于可见标签，但不适用于隐藏标签，因为它会切换 'VisibleLabel' 的可见性，但 'HiddenLabel' 的可见性保持不变（隐藏）。

Answer 1

您正在尝试交换类，而不是可见性。你应该使用 .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() 本身就可以完成您想要做的事情，但现在您需要切换类而不是元素。

Answer 2

jQuery.toggle()变css-属性display.

而不是 css-属性 visibility.

试试看：

.hidden {
    display: none;
}

.visible {
    display: block;
}

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

Toggle visibility of 2 elements with jQuery

html

javascript

css

jquery