javascript - 页面重新加载后向导航添加和删除类

Question

我有一个最多可以有两个子菜单的导航。意思是，如果当前页面是子子导航中的 href，我必须打开上面的 li(将类“open”添加到类“arrow”)两次。

但是，我正在纠结于如何做到这一点，如何解决这个问题。我的想法是通过 jQuery 解决它。有更好的解决方案吗？

这是我的导航:

<ul class="page-sidebar-menu page-header-fixed page-sidebar-menu-light">
    <li class="nav-item start">
        <a href="my-domain.com/dashboard" class="nav-link nav-toggle">
            <i class="icon-home"></i>
            <span class="title">Dashboard</span>
            <span class="selected"></span>
        </a>
    </li>
    <li class="nav-item">
        <a href="javascript:void(0)" class="nav-link nav-toggle">
            <i class="icon-people"></i>
            <span class="title">Kontakte</span>
            <span class="arrow"></span>
        </a>
        <ul class="sub-menu">
            <li class="nav-item">
                <a href="my-domain.com/kontaktverwaltung" class="nav-link ">
                    <span class="title">Kontaktverwaltung</span>
                    <span class="selected"></span>
                </a>
            </li>
            <li class="nav-item">
                <a href="javascript:void(0)" class="nav-link nav-toggle">
                    <span class="title">Kunden</span>
                    <span class="arrow"></span>
                </a>
                <ul class="sub-menu">
                    <li class="nav-item ">
                        <a href="my-domain.com/kundendetails" class="nav-link "> Kundendetails </a>
                        <span class="selected"></span>
                    </li>
                    <li class="nav-item">
                        <a href="my-domain.com/kundenverwaltung" class="nav-link "> Kundenverwaltung </a>
                        <span class="selected"></span>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

例子: 当前页面是:my-domain.com/kundenverwaltung。这意味着，我必须将类“active open”添加到 ul 子菜单的两个 li 元素以及将类“open”添加到 li 元素的类“arrow”。

它应该是这样的:

<ul class="page-sidebar-menu page-header-fixed page-sidebar-menu-light">
    <li class="nav-item start">
        <a href="my-domain.com/dashboard" class="nav-link nav-toggle">
            <i class="icon-home"></i>
            <span class="title">Dashboard</span>
        </a>
    </li>
    <li class="nav-item **active open**">
        <a href="javascript:void(0)" class="nav-link nav-toggle">
            <i class="icon-people"></i>
            <span class="title">Kontakte</span>
            <span class="arrow **open**"></span>
        </a>
        <ul class="sub-menu">
            <li class="nav-item">
                <a href="my-domain.com/kontaktverwaltung" class="nav-link ">
                    <span class="title">Kontaktverwaltung</span>
                </a>
            </li>
            <li class="nav-item **active open**">
                <a href="javascript:void(0)" class="nav-link nav-toggle">
                    <span class="title">Kunden</span>
                    <span class="arrow **open**"></span>
                </a>
                <ul class="sub-menu">
                    <li class="nav-item ">
                        <a href="my-domain.com/kundendetails" class="nav-link "> Kundendetails </a>
                    </li>
                    <li class="nav-item">
                        <a href="my-domain.com/kundenverwaltung" class="nav-link "> Kundenverwaltung </a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我在类名前后用**标记了类的变化。到目前为止，这是我的 jQuery:

<script>
$("a.nav-link").each(function(index){
    if($(this).attr("href") == window.location.href) {
        $(this).parent().addClass("active open");

        if ($(this).parent().parent().is("ul")) {
            $(this).parent().parent().parent().addClass("active open");
            var li = $(this).parent().parent().parent();
            $(li[0].nodeName + " .arrow").addClass("open");
        }
    }
});
</script>

但是，我认为这不是最好的解决方案..还有更好的方法吗？亲切的问候

Answer 1

1. 如果您更改 HTML 的结构，您的代码将无法工作，所以 - 不要使用 parent()，尝试使用 closest() https://api.jquery.com/closest ，因为 closest() 是一种更可靠的方法

2. 缓存数据。你可以使用 http://api.jquery.com/attribute-equals-selector :

   var $a = jQuery('a[href*="' + window.location.href + '"]'); $a.addClass("主动打开");

3. 要将类添加到事件页面，您应该尝试通过后端添加它，不同类型的模板 - 可以做到。不过你的方法也可以用