重新加載頁面后將類添加到導航

Question

我有一個導航，最多可以有兩個子菜單。 意思是，如果當前頁面是sub子導航中的href，則必須兩次打開上述li（將class“ open”添加到class“ 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。 這意味着，我必須在ul子菜單的li元素中都添加“ active open”類，並在li元素的“ a​​rrow”類中添加“ open”類。

這應該是這樣的：

<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（），請嘗試使用最近的（） https://api.jquery.com/closest ，因為最近的（）方法更可靠

2. 緩存數據。 您可以使用http://api.jquery.com/attribute-equals-selector ：

   var $a = jQuery('a[href*="' + window.location.href + '"]'); $a.addClass("active open");

3. 為了將類添加到活動頁面，您應該嘗試在后端添加此類，這是另一種模板-可以做到。 但是你的方法也可以用