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

This works well for the visible label, but not for the hidden one, as it toggles the visbility of the 'VisibleLabel', but the visibility of the 'HiddenLabel' remains unchanged (hidden).

Answer 1

You are trying to swap the classes, and not the visibility. You should use .toggleClass :

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

Snippet

 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>

The reason being, the function .toggle() alone can do the thing what you are trying to do, but now you need to toggle the classes and not the elements.

Answer 2

The jQuery.toggle() changes the css-property display .

And not the css-property visibility .

Try instead:

.hidden {
    display: none;
}

.visible {
    display: block;
}