Question

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

我想创建一个与此处相似的滑动菜单：

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

此菜单的问题在于它使用ajax来调用菜单内容1）意味着用户的后退/前进导航令人困惑，因为它通过ajax #hashtags而不是用户已经过的页面来回/转发on，和2）在调用每个菜单项时，加载内容会有滞后。

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

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

马特

Answer 1

我复制了部分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（如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标签，请参阅demo here。它需要样式，但应该比调整以前的代码更少工作。

有关基本示例，请参阅this jsFiddle。只需要完成选项卡的样式。

Answer 2

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

http://jqueryui.com/menu/

没有ajax的JQuery slidedown菜单

2 个答案: