在jQuery中反轉.toggle（）

我想在按下按鈕時切換div。目前我有這樣的：在jQuery中反轉.toggle（）

$("#reportOptions").toggle("fast");

但是，當我第一次按一下按鈕，它設置的div：

display: none;

當我再次點擊：

display: block;

這很好，但我希望第一次點擊是樣式塊，所以反過來切換。
我該怎麼做？ Jquery.com沒有解釋這一點，每個SO上的帖子都是關於反轉動畫，而不是關於布爾值。

我已經嘗試將初始HTML設置爲display: none;，但如果我這樣做，動畫就會以奇怪的方式取消（僅適用於第一次點擊）。

來源

2016-02-20 Mats de Waard

爲什麼不是$（「＃reportOptions」）。toggle（「hide」）; – C2486

'toggle'檢查當前樣式並顯示爲隱藏 – Grundy

@LearningMode因爲它需要取消隱藏第一次點擊，並隱藏第二次，等等。 –

全部toggle()確實在display: none和display: block之間切換。如果您想要第一次點擊將元素設置爲display: block，請使用display: none初始化元素的樣式。這裏有一個演示：

#reportOptionsHidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h2>Initially visible</h2> 
 
<div id="reportOptionsVisible">Here are the initially visible report options</div> 
 
<button onclick="$('#reportOptionsVisible').toggle('fast')">Toggle</button> 
 

 
<h2>Initially hidden</h2> 
 
<div id="reportOptionsHidden">Here are the initially hidden report options</div> 
 
<button onclick="$('#reportOptionsHidden').toggle('fast')">Toggle</button>

來源

2016-02-20 17:25:58

對不起，但我忘記了在我的初始文章中提到我已經嘗試過了，但是如果我這樣做，動畫就會以一種奇怪的方式取消。 –

你能描述一下「怪異的方式」還是發佈gif？這應該工作得很好;也許你還有別的東西擋道。 –

切換隱藏和顯示，可就是這樣使用。

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<div id="reportOptions" style="display:none;"> 
this is just test 
</div> 
<input type="button" onclick="fun_toggle()" value="Toggle"> 
<script type="text/javascript"> 
function fun_toggle(){ 
    $("#reportOptions").toggle("hide"); 
} 
</script>

來源

2016-02-20 17:45:38 C2486

只需在CSS中關閉第一個切換點應該帶到的相反顯示位置的div。

來源

2016-02-20 17:51:24

在jQuery中反轉.toggle（）

回答

相關問題