0

好的，所以我是 javascript 的新手，但我可以很好地处理 jquery...但是 jquery 在小型移动网络体验上真的很重...有时它甚至太笨拙了。

所以我有这段代码可以简单地弹出我的菜单栏，我想知道是否有任何简单的方法可以得到这个？

$(function() {
    $('div.menu').hide();
    $("img#menu").click(function () {
          $("div#menu").toggle("slide", {direction: "right"}, 500);
    });
});
4

2 回答 2

2

查看您的代码，我会指出以下内容（请参阅评论）：

$(function() {
    // here you are searching by class name, that is going to eat CPU
    $('div.menu').hide();
    $("img#menu").click(function () {
        // here you are doing a JavaScript animation, eating more of the CPU
        $("div#menu").toggle("slide", {direction: "right"}, 500);
    });
});

使用 CSS 而不是 JavaScript 依赖于原生代码而不是解释的 JavaScript。

还有一个技巧是许多移动设备都针对 3D CSS 过渡进行了优化（因为 3D 用于执行手机自己的 UI 使用的翻转和滑动功能）。因此，使用 3D 过渡将使您从引擎中获得更多的空间。

使用 CSS 的代码的 jsFiddle 在这里：

CSS 过渡的一个很好的介绍在这里：

于 2012-10-01T00:05:28.457 回答
1

您可以使用纯 CSS 模拟菜单，无需任何 JavaScript，只需编写一个 css 选择器，将鼠标悬停在您想通过它显示菜单的项目上，但这样您就不能有像幻灯片这样的效果。要创建这种效果，您应该阅读他们在 jQuery 中的代码并在 JS 中实现它们。其他的事情也可以使用 jquery 的源代码来处理，但是对于选择器（比如 'div.menu'），你可以使用来自Sizzlejs.com的 Sizzle这个库非常小（4k gzipped 和缩小），它的选择器引擎可以做任何 jQuery 可以做的事情（实际上 jQuery 内部使用 Sizzle ）

于 2012-09-30T23:02:33.360 回答