4

我有以下 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# ...但是当在手风琴。

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

4

4 回答 4

3

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

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

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

如果第一个不太好，试试这个或从这里挑选任何一个。

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

于 2010-04-14T10:48:01.777 回答
2

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

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

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

于 2010-04-13T03:48:36.513 回答
1

我个人认为自动完成可能真的是要走的路。但是，我有一个想法，通过替换一个假的短选择来隐藏长选择会使幻灯片更平滑。似乎在我测试的一个浏览器（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() { });
     }
});
于 2010-04-13T03:26:11.720 回答
1

您可以做的是在为 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 样式的选择列表可能是最好的选择。

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

于 2010-04-14T12:20:59.967 回答