为什么这个带有 closest() 的 JQuery 选择器在这里不起作用？

Question

我尝试使用JQuery来突出显示当前的主菜单点。它可以单击主菜单点，但在单击子菜单点时不起作用。主菜单点始终可见，子菜单点用 css 隐藏。主菜单点的 'li' 标签总是有 class 下拉列表，而其他的则没有，所以使用 closest() 方法我想 select 最近的 'a'单击的菜单点的祖先（也包括其自身）具有父级 'li' 和 class 下拉菜单。我尝试使用以下 JQuery 代码来执行此操作，但是在单击子菜单点时它无法正常工作，我不知道为什么。任何帮助将不胜感激。

JQuery:

$(document).ready(function(){
     $("li a").click(function(){
                 $("li a.active").removeClass("active");
                 $(this).closest("li.dropdown a").addClass("active");
            });
        });

HTML:

<ul>
            <li class="dropdown"><a class="active" href="#home"><i class="fa fa-home"></i></a></li>
            <li class="dropdown"><a href="#">Menüpont 1</a>
                <ul class="dropdown-content">
                    <li><a href="#menu11">Menüpont 1.1</a></li>
                    <li><a href="#menu12">Menüpont 1.2</a></li>
                    <li><a href="#menu13">Menüpont 1.3</a></li>
                    <li><a href="#menu14">Menüpont 1.4</a></li>
                </ul>
            </li>
            <li class="dropdown"><a href="#">Menüpont 2</a>
                <ul class="dropdown-content">
                    <li class="sub-dropdown"><a href="#">Menüpont 2.1<i class="fa fa-caret-right" aria-hidden="true"></i></a>
                        <ul class="sub-dropdown-content">
                            <li><a href="#menu211">Menüpont 2.1.1</a></li>
                            <li><a href="#">Menüpont 2.1.2</a></li>
                            <li><a href="#">Menüpont 2.1.3</a></li>                                
                        </ul>                    
                    </li>
                    <li><a href="#">Menüpont 2.2</a></li>
                    <li><a href="#">Menüpont 2.3</a></li>
                    <li><a href="#">Menüpont 2.4</a></li>
                    <li><a href="#">Menüpont 2.5</a></li>
                    <li><a href="#">Menüpont 2.6</a></li>
                    <li><a href="#">Menüpont 2.7</a></li>
                </ul>                
            </li>
            <li class="dropdown"><a href="#">Menüpont 3</a></li>
            <li class="dropdown"><a href="#">Menüpont 4</a></li>
            <li class="dropdown"><a href="#">Menüpont 5</a></li>
</ul>

Answer 1

我刚刚找到了解决方案:)

$(document).ready(function(){
    $("li a").click(function(){
             $("li a.active").removeClass("active");
             $(this).closest(".dropdown").children("a").addClass("active");
        });
    });

Answer 2

您尝试通过选择器 li.dropdown a 获取元素，但您链接的父元素是 li 和 ul.dropdown。如果您想获取此菜单中的所有链接，请使用此代码 $(this).closest('.dropdown').find('li > a')

为什么这个带有 closest() 的 JQuery 选择器在这里不起作用？

Why this JQuery selector with closest() does not work here?

jquery

html

closest

jquery-traversing