javascript - 在 mmenu 中选择所有直接父列表条目

Question

我正在做一个元素，我将在其中使用 jQuery 插件 mmenu ( http://mmenu.frebsite.nl/ )。

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

现在我想另外将父列表项(以及那是父项，依此类推，直到菜单根)标记为选中。这应该是这样的，当用户在菜单中向上一级时，他应该能够看到他当前所在的类别。

下面是应用 mmenu 后的菜单 html 结构示例。这显示了具有 4 个主页面(索引、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>

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

Answer 1

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

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);
    }
};