摆脱切换时的打嗝答案

【问题标题】：get rid of hiccup on toggle摆脱切换时的打嗝
【发布时间】：2013-11-11 22:30:36
【问题描述】：

我正在使用 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>

Here's my jsfiddle

提前致谢

【问题讨论】：

给你的.dropThis一个position:absolute;。
检查这个：stackoverflow.com/questions/166299/…
位置：绝对加法似乎是最简单的解决方法。谢谢@putvande

标签： javascript jquery-ui

【解决方案1】：

将ul 样式设置为：

margin-top: 0;

【讨论】：

【解决方案2】：

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

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

更多关于backface- visibility的信息。

【讨论】：