Question

我想在按下按钮时切换div。目前我有这个：

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

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

display: none;

当我再次点击时：

display: block;

哪个好，但我希望第一次点击是样式块，所以反转切换。
我怎样才能做到这一点？ Jquery.com没有解释这一点，关于SO的每篇文章都是关于反转动画而不是关于布尔值。

我已经尝试将初始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。

在JQuery中反转.toggle（）

3 个答案: