8

我有一个自定义手风琴菜单。为了在菜单中显示二级选项，我选择使用slideToggle(). 出于某种原因，在他们单击和动画发生之间存在延迟。

在此处输入图像描述

当与同一页面上的另一个手风琴菜单相比时，这一点很明显......我发现绑定（单击）到菜单项的功能几乎立即执行。问题是slideToggle动画似乎比它应该开始的晚。

我相信这可能会发生，因为我针对slideToggle()被调用的元素的方式。

            var $expandableMenu = $(".expandable .level1");

            $expandableMenu.bind('click', function () {

                $(this).next().slideToggle(200, function () {
                    $(this).parent().toggleClass("opened");
                });

            });

也许问题在于这$(this).next()是一种针对我需要使用的元素的缓慢方法slideToggle()？

你觉得呢？你有没有什么想法？

编辑：我做了一个 jsFiddle 测试用例......奇怪的是，这里没有发生这个问题。http://jsfiddle.net/nYZNP仍在寻找问题。

4

2 回答 2

1

如果您在移动设备上尝试此操作，动画启动可能确实需要更长的时间，因为设备正在等待（甚至 200 毫秒以上）以确保您没有尝试双击。如果是这种情况，您可以使用像zepto.js这样的库，它有一个点击事件或fastclick.js模拟点击事件。

就选择器性能而言，$(this).parent()应该没问题。但是，在这种情况下，您可以通过不先写入和读取变量来消除几毫秒，如下所示：

       $(".expandable .level1").bind('click', function () {

            $(this).next().slideToggle(200, function () {
                $(this).parent().toggleClass("opened");
            });
        });

此外，“从 jQuery 1.7 开始，.on() 方法是将事件处理程序附加到文档的首选方法。” （jQuery API）。或者换句话说，bind()已弃用！

最后还有一般规则，按标签名过滤比按类名或 id 过滤快，所以$("li.expandable .level1")应该比$(".expandable .level1").

也许您还可以更具体地了解具体情况，例如浏览器/设备或您的小提琴的任何其他差异？

于 2013-12-10T08:23:04.100 回答
0 
            $(this).next().slideToggle(200, "linear", function () {
                $(this).parent().toggleClass("opened");
            });

您是否尝试过使用不同的缓动选项？

此外，如果您在移动设备上遇到此问题，则延迟可能是移动设备处理点击事件的方式的一部分，该事件可能具有 50 毫秒或更多的固有延迟。

于 2013-08-02T14:50:17.900 回答