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元素的“ arrow”类中添加“ 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

如果您更改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");
要将类添加到活动页面，您应该尝试在后端添加此类，这是另一种模板-可以做到。但是您的方法也可以使用

重新加载页面后将类添加到导航

1 个答案: