1

抱歉，这是一个 nube 问题，我刚刚习惯了 javascript。

我想创建一个类似于此处找到的下拉菜单：

http://www.impressivewebs.com/demo-files/mega-drop-downs/index.html

这个菜单的问题在于它使用 ajax 来调用菜单内容，这 1) 意味着用户的后退/前进导航令人困惑，因为它通过 ajax #hashtags 而不是用户访问过的页面后退/前进，并且2) 在调用每个菜单项时加载内容存在延迟。

有谁知道没有使用 ajax 的具有相同效果（.slidedown）的任何好的 jquery 菜单包？（或者任何人都可以建议一种修改此菜单的方法，使其不使用 ajax）。

提前感谢您的任何帮助/建议。

马特

4

2 回答 2

0

您可以使用 1.9 版本中引入的 jQuery 菜单：

http://jqueryui.com/menu/

于 2012-12-11T12:55:17.687 回答
0

我复制了他们的部分js。

// populates the menu according to what link was clicked, opens it if not already opened
populateMenu: function (currentLink) {
    dd.removeClass(pages);
    dd.addClass(currentLink + " open");
    dd.slideDown(speed, function () {
        // callback that runs after menu finishes sliding down
        $("nav ul li.menu>a.active").find("span").html(upArrow);
        // ajax call is below; it appends a timestamp to prevent caching, in case of dynamic content; remove if you like
        dd.load(dir + "/" + currentLink + ext + "?" + new Date().getTime(), function () {
            // callback that runs after menu finishes loading
            dd.removeClass("loading");
            addCloseLink();
        });
    });
    // change the hash according to the clicked link
    document.location.hash = currentLink;
},

如果您dd.load使用 jQuery 更改对 modify 语句的调用，就像dd.html(...)您选择的内容一样，您不必使用 ajax。

如果您删除document.location.hash = currentLink;函数末尾的行，它不会修改您的后退/前进导航。

最终看起来像：

populateMenu: function (currentLink) {
  dd.removeClass(pages);
  dd.addClass(currentLink + " open");
  dd.slideDown(speed, function () {
    // callback that runs after menu finishes sliding down
    $("nav ul li.menu>a.active").find("span").html(upArrow);
    dd.html($('#your_source_here'));
    dd.removeClass("loading");
    addCloseLink();
  });
},

编辑：

您还可以使用带有可折叠内容的 jQueryUI 选项卡，请参阅此处的演示。它需要样式，但工作量可能比修改以前的代码要少。

有关基本示例，请参阅此 jsFiddle。只需要设置选项卡的样式。

于 2012-12-11T12:21:12.380 回答