为什么这个带有 closest() 的 JQuery 选择器在这里不起作用?
Why this JQuery selector with closest() does not work here?
我尝试使用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>
我刚刚找到了解决方案:)
$(document).ready(function(){
$("li a").click(function(){
$("li a.active").removeClass("active");
$(this).closest(".dropdown").children("a").addClass("active");
});
});
您尝试通过选择器 li.dropdown a
获取元素,但您链接的父元素是 li
和 ul.dropdown
。
如果您想获取此菜单中的所有链接,请使用此代码
$(this).closest('.dropdown').find('li > a')
我尝试使用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>
我刚刚找到了解决方案:)
$(document).ready(function(){
$("li a").click(function(){
$("li a.active").removeClass("active");
$(this).closest(".dropdown").children("a").addClass("active");
});
});
您尝试通过选择器 li.dropdown a
获取元素,但您链接的父元素是 li
和 ul.dropdown
。
如果您想获取此菜单中的所有链接,请使用此代码
$(this).closest('.dropdown').find('li > a')