反向.toggle()在JQuery中

Question

我想按下按钮时切换一个div。目前，我有以下几点：

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

但是，当我第一次单击该按钮时，它将div设置为：

display: none;

当我再次点击：

display: block;

这很好，但我希望第一次点击是样式块，所以反向切换。

我该怎么做？Jquery.com没有解释这一点，所以每一篇文章都是关于倒置动画的，而不是关于布尔值的。

我已经尝试将初始的HTML设置为display: none;，但是如果我这样做的话，动画会以一种奇怪的方式取消(只对第一次单击)。

Answer 1

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>

​

Answer 2

切换以隐藏和显示可以像这样使用。

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

Answer 3

只要在CSS中启动div，就可以看到第一个按钮应该带您去的相反的显示。