使 mmenu 扩展到当前 url答案

【问题标题】：Make mmenu expand to the current url使 mmenu 扩展到当前 url
【发布时间】：2015-11-23 20:34:32
【问题描述】：

我正在使用mmenu 来创建一个不错的响应式菜单。它工作得很好，但我希望它打开与当前 url 匹配的列表项。这样，如果您进入网站并打开菜单，您可以立即看到您所在的位置。我一直在尝试使用 api 来实现此功能。

有关 mmenu 的 api 文档，请参见上面的链接。

我的代码：

var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
var api = $("nav#menu").data("mmenu");
api.bind("openPanel", function($panel) {
console.log("This panel is now opened:" + $panel.attr("id")); //Works
var href = $panel.find("li a").attr("href");
    if (href == url) {
       api.openPanel($panel); //Open the panel where the matching link is - doesn't work
       console.log("Success!" + href);
    }
});

JsFiddle here.

我就是无法让它工作。有什么想法吗？

【问题讨论】：

标签： jquery api mmenu

【解决方案1】：

我对您的 JS Fiddle 的处理方式与您最初设置的方式略有不同，所以我希望它仍然适用于您。

Mmenu 有一个名为“classNames”的配置对象，您可以在其中传递li 上的类，您希望默认使用“selected”对象。这是您使用此设置更新后的 mmenu init：

$("#menu").mmenu({
    "offCanvas": {
        "zposition": "front"
    }
}, {
    classNames: {
        selected: "current-page"
    }
});

在调用这个init之前我所做的是循环遍历菜单中的<a>标签以匹配href和url变量，然后在找到匹配项时将类添加到父<li>（注意：这使用您现有的 url var 逻辑）。

var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$('#menu a').each(function(){
    var href = $(this).attr("href");
    if ( href == url ){
        $(this).parent('li').addClass('current-page');
    }
});

在 JS Fiddle 上，没有一个 href 与 window.location 匹配，所以我只是将类硬编码到第三级抽屉之一，这样你就可以看到它工作了。当您在您的设置上尝试此操作时，您显然希望删除硬编码的类。

Here is the updated Fiddle.

【讨论】：

完美运行。感谢您的帮助！