页面重新加载后向导航添加和删除类答案

【问题标题】：Add and remove class to nav after page reload页面重新加载后向导航添加和删除类
【发布时间】：2018-06-30 06:19:46
【问题描述】：

我有一个最多可以有两个子菜单的导航。意思是，如果当前页面是子导航中的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。这意味着，我必须将“活动打开”类添加到 ul 子菜单的 li 元素以及将“打开”类添加到 li 元素的“箭头”类。

应该是这样的：

<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>

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

【问题讨论】：

重新加载是什么意思？
是一个.arrow .open 当且仅当它是一个<a> 的孩子是一个.open <li> 的孩子？换句话说，您能否将 .open 类从 .arrows 中删除，并将您的 CSS 从 .open { ... 更改为 .open, .open > a > .arrow { ...？

标签： javascript jquery html css

【解决方案1】：

如果你改变 HTML 的结构，你的代码将无法工作，所以 - 不要使用 parent()，尝试使用最接近的()https://api.jquery.com/closest ，因为最接近的() 是更可靠的方法
缓存数据。你可以使用 http://api.jquery.com/attribute-equals-selector:

var $a = jQuery('a[href*="' + window.location.href + '"]'); $a.addClass("active open");
要向活动页面添加一个类，您应该尝试通过后端添加这个，不同类型的模板 - 可以做到。但是你的方法也可以使用

【讨论】：