Question

我尝试使用JQuery突出显示当前的主要menupoint。它可以单击主菜单点，但在单击子菜单点时不起作用。主菜单点始终可见，子菜单点用css隐藏。主菜单点的'li'标签总是有类下拉列表而其他标签没有，所以使用nearest（）方法我想选择最近的'a'祖先（包括它自己）点击的菜单点有一个父类'li'与类下拉列表。我尝试使用以下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

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

Answer 2

我刚刚找到了解决方案：）

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

为什么这个带有nearest（）的JQuery选择器在这里不起作用？

2 个答案: