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");
}

<强>段

＆＃13;

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

＆＃13;

.hidden {
  visibility: hidden
}
.visible {
  visibility: visible
}

＆＃13;

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

＆＃13;

原因是，单独的函数.toggle()可以完成你想要做的事情，但现在你需要切换类而不是元素。

Answer 2

jQuery.toggle()更改了css-property display。

不 css-property visibility。

尝试改为：

.hidden {
    display: none;
}

.visible {
    display: block;
}

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

2 个答案: