也为家长添加课程

Question

我正在构建一个多级菜单，并且想通过函数（正在运行）向元素添加一个活动类，但也想将此类添加到其父元素中。

<ul class="main-menu">
<li><a href="#" class="nav-link">Maine Level 1</a>
    <ul>
    <li><a class="nav-link" scene="scene_1">Scene 1</a></li>
    <li><a class="nav-link" scene="scene_2">Scene 2</a></li>
    </ul>
</li>
<li><a href="#" class="nav-link">Maine Level 2</a>
    <ul>
    <li><a class="nav-link" scene="scene_3">Scene 3</a></li>
        <ul>
        <li><a class="nav-link" scene="scene_3.1">Scene 3.1</a></li>
        <li><a class="nav-link" scene="scene_3.2">Scene 3.2</a></li>
        </ul>
    <li><a class="nav-link" scene="scene_4">Scene 4</a></li>
    </ul>
</li>
</ul>

功能：

    function set_active_scene(name){
     $("ul.main-menu ul li a").each(function() {
        $(this.closest('li')).removeClass("active");
        if ($(this).attr("scene") == name)
            $(this.closest('li')).addClass("active");
    });
}

我尝试使用 $(this.parents('li')).addClass("active");但它不工作... 任何想法 ？ 非常感谢！

Answer 1

如果您只想将“active”类添加到活动锚元素的直接父 li 元素，则可以简单地使用parent()。这是修改后的函数：

function set_active_scene(name) {
    $("ul.main-menu ul li a").each(function() {
        $(this).closest('li').removeClass("active"); // Remove active class from all list items
        if ($(this).attr("scene") == name) {
            $(this).closest('li').addClass("active"); // Add active class to the current list item
            $(this).parent('li').addClass("active"); // Add active class to the immediate parent list item
        }
    });
}

通过此修改，只有活动 a 元素的 li 元素的直接父级才会接收“active”类，而不是 DOM 树上的所有父级 li 元素。