javascript - 摆脱切换时的打嗝

Question

我正在使用 jquery ui 切换来获取地图图例的下拉菜单。

问题是当您单击类以显示下拉 div 时；div 稍微跳跃的地方有一个轻微的打嗝。有谁知道为什么会这样？这是我的html：

<h3 id="conservation-header">
<i class="icon-stop" style="color:#739435;"></i> 
<i class="icon-caret-down" style="color:#fff;"></i> 
<span class="dropdown">Conservation</span> &nbsp; 
<span class="extras" style="color:#739435;">[
<a style="color:#739435;" id="conservationMoreLink" href="#">info</a>] &nbsp; [
<a style="color:#739435;" >images</a>]</span>
</h3>

       <div class="dropThis" style="display:none;">
       <ul>
         <li>Preservation</li>
         <li>Silviculture</li>
         <li>Limited Agriculture consistent with resource value</li>
         <li>Environmental Services</li>
         <li>Mitigation</li>
         <li>Recreation</li>
         <li>Roadway Connections</li>
         </ul>
       </div>

这是我的jsfiddle

提前致谢

Answer 1

将ul样式设置为：

margin-top: 0;

Answer 2

我过去可以通过将元素（或任何父元素）的背面可见性设置为来修复打嗝/跳跃'hidden';

如果您在 Chrome 中对此进行测试，请尝试添加-webkit-backface-visibility: hidden;到 body 元素并查看问题是否已解决。

有关背面可见性的更多信息。