切換知名度與jQuery

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」的visbility，但的知名度'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; 
}