使用 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-property display 。

而不是css-property visibility 。

试试吧：

.hidden {
    display: none;
}

.visible {
    display: block;
}