javascript - Jquery 下拉菜单中不需要的 "flashing"？

Question

我有以下 Jquery 片段:

$("#collapse-menu > li > a").click(function() {
    $(this).toggleClass("expanded").toggleClass("collapsed").find("+ ul").slideToggle("medium");
});

它基本上做的是展开或折叠包含下拉菜单的嵌套“列表”菜单(简化示例):

<ul id="collapse-menu">
   <li><a class="expanded">Basic Details</a>
      <ul>
         <li>
            <select> .... </select>
         </li>
         <li>
            <select> .... </select>
         </li>

除非在任何下拉列表中选择了一个较大的值，否则代码工作得非常好。那时，单击时，菜单仍会正确展开/折叠，但在执行此操作时会快速“闪烁”，就好像整个元素正在以某种方式重置一样。数据本身很好，但不需要的是闪烁。

奇怪的是，如果在下拉列表中选择了一个较小的值，则不会闪烁。 When a large value is selected (say, above 30 in an age dropdown of 18-99), the flashing starts happening.

谁能告诉我为什么会这样？或者是不是 Jquery 有什么不对导致的。

谢谢。

更新:

为此添加赏金。在网上尝试了一些类似的插件/解决方案，但当默认选择较大的下拉值时，它们似乎都遇到了这种“闪烁”问题。

如果有帮助，这里有一个典型的类似解决方案:http://www.i-marco.nl/weblog/jquery-accordion-menu/index_collapsed.html# ...但是当在 Accordion 中添加下拉菜单时，它会遇到同样的问题。

我希望有人有一个干净的解决方案，而不是需要以某种方式破解它。

Answer 1

根据我的观察:这个问题似乎取决于操作系统。选择由系统绘制，因为它们是系统控件。在我的 Linux 机器上，我在 http://jsbin.com/ixake 中没有遇到闪烁动画的问题。例子。我希望您在 Windows (r) 上测试过它

看起来每次重新绘制时选择都“滚动”到正确的值。这在制作动画时经常发生。

最简单的解决方案是将系统选择替换为基于 html 的选择，以消除系统依赖性。有一些不显眼的 jquery 插件可以为您完成。

尝试 this 或从 here 中选择任何一个 如果第一个不太好。

在那之后你的动画应该只依赖于 JS 和样式。