使用 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;
}