在 mmenu 中选择所有直接父列表条目答案

【问题标题】：Make all direct parent list entries selected in mmenu在 mmenu 中选择所有直接父列表条目
【发布时间】：2015-03-04 23:55:50
【问题描述】：

我正在做一个项目，我将要使用 jQuery 插件 mmenu (http://mmenu.frebsite.nl/)。

我已经必须进行一些自定义以满足我的需求，但我不知道如何处理我当前的问题。在 mmenu 中，当我单击列表条目时，我将导航到给定的 href，并且单击的项目通过 mmenus css 类“.mm-selected”变为活动状态。到目前为止一切顺利。

现在我想另外将父列表项（以及父列表项，依此类推，直到菜单根目录）标记为已选中。这应该是这样，当用户在菜单中上一级时，他应该能够看到他当前属于哪个类别。

以下是应用 mmenu 后的 menus html 结构示例。这显示了一个包含 4 个主页面（index、page1、page2 和 page3）和 3 个子页面（2.1、2.2、2.3）的菜单的代码。

<nav id="nav" class="mm-menu mm-horizontal mm-offcanvas mm-hasheader mm-current mm-opened">
    <ul class="mm-list mm-panel mm-opened mm-current" id="mm-0">
        <li class="mm-selected">
            <a href="#/index">Index</a>
        </li>
        <li>
            <a href="#/page1">Page 1</a>
        </li>
        <li>
            <a class="mm-subopen mm-fullsubopen" href="#mm-1"></a>
            <span>Page 2</span>
        </li>
        <li>
            <a href="#/Page 3">Page 3</a>
        </li>
    </ul>
    <ul class="mm-list mm-panel mm-highest" id="mm-1">
        <li class="mm-subtitle">
            <a class="mm-subclose" href="#mm-0">Page 2</a>
        </li>
        <li>
            <a href="#/page2-1">Page 2.1</a>
        </li>
        <li>
            <a href="#/page2-2">Page 2.2</a>
        </li>
        <li>
            <a href="#/page2-3">Page 2-3</a>
        </li>
    </ul>
</nav>

如果您知道我可以在何处以及如何实现此类功能，那就太好了。

【问题讨论】：

给我们html结构。或工作的 jsfiddle

标签： javascript jquery html css mmenu

【解决方案1】：

所以，目前我做了一些 jQuery hack。这似乎适用于我上面提到的情况。它也应该适用于更深的菜单，因为它使用递归。如果有更好的方法来实现这一点，请告诉我。

var nav = $("#nav");

nav.find("li > a:not(.mm-subopen)").click(function () {
    nav.find("li.active").removeClass("active");
    selectParentEntry($(this));
});

var selectParentEntry = function (a) {
    var li      = a.parent(),
        ul      = li.parent(),
        back    = ul.find("li > a.mm-subclose").first(),
        cID     = "#" + ul.attr("id"),
        pID     = back.length ? back.attr("href") : null;

    li.addClass("active");

    if (pID != null) {
        var subOpen = nav.find("ul" + pID + " > li > a.mm-subopen").filter(function () {                 
            var self = $(this);
            if (self.attr("href") === cID) return self;
        }).first();

        if (subOpen) selectParentEntry(subOpen);
    }
};

【讨论】：