javascript - JQuery 中的反向 .toggle()

Question

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

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

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

display: none;

当我再次点击时:

display: block;

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

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