Jquery下拉菜单中不需要的“闪烁”？

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>

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

奇怪的是，如果在下拉列表中选择了一个小值，则没有闪烁。选择大值时（例如，在年龄下降到18-99的年龄下降）时，闪烁开始发生。

谁能告诉我为什么会这样？或者是否有导致此问题的 Jquery 有问题。

谢谢。

更新：

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

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

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

Answer 1

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

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

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

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

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

Answer 2

我认为问题在于每次调整元素大小时，下拉菜单都会滚动到所选元素，这会导致闪烁。

答案是将每个选择保存在 javascript 中（在更改时说），然后在动画开始时取消选择该值，然后在动画停止时恢复它。这将为您提供与选择较小值时相同的性能，同时保留用户的选择。

您可能还希望确保在过渡阶段不能提交表单，否则您将返回错误的值。

Answer 3

我个人认为自动完成可能真的是要走的路。但是，我有一个想法，通过替换一个假的短选择来隐藏长选择会使幻灯片更平滑。似乎在我测试的一个浏览器（Firefox 3.0.18）上工作得更好。代码可能会被清理，并且存在一个错误，即由于内部滚动条，有时选择默认情况下与大小不匹配，但这不应该太难伪造。

$("#collapse-menu > li > a").click(function() {
    var was_expanded = $(this).hasClass('expanded');
    var uls = $(this).toggleClass("expanded").toggleClass("collapsed").find('+ ul');
    if (was_expanded) {
        $(this).parent().find('select').each(function() {
            var fake = $('<select class="fake"><option>' + $(this).val() + '</option></select>');
            $(this).parent().append(fake);
            $(this).hide();
        })
        uls.slideUp('medium', function() { });
    } else {
        $('.fake').remove();
        $('select').show();
        uls.slideDown('medium', function() { });
     }
});

Answer 4

你可以做的是在动画 ul 之前禁用选择列表。

        $("#collapse-menu > li > a").click(function() {
            $(this)
                .toggleClass("expanded").toggleClass("collapsed")
                .find("+ ul").find("select").attr("disabled","disabled").end()
                .slideToggle("medium",function(){
                    $(this).find("select").each(function(){this.disabled=false;});
                });
        });

试一试并报告。

您可能希望设置 (CSS) 禁用选择列表的样式，使其看起来与非禁用选择列表相同。

---

注意事项

以上有一个副作用，即在提交表单时不提交所选值。如果这对您来说是个问题，那么我建议您在制作动画之前从选择列表中删除除所选选项之外的所有选项，然后在动画完成后将它们全部重新添加。如果这对您不起作用，naugtur 建议使用 HTML 样式的选择列表可能是最好的选择。

附注不要费心尝试使用选择列表上的只读属性...它不存在。