javascript - jQuery:仅影响属于另一个元素的子元素的特定类的元素

Question

我有一个 jQuery 函数，可以通过单击时更改其类来切换下拉导航菜单:

$(function () {
     $('.nav-titles').on('click', function() {
        $('.nav-dropdown').toggleClass('nav-dropped-down');
     });
});

<nav>
	<li>
		<a class="nav-titles"></a>
		<div class="nav-dropdown"></div>
	</li>
	<li>
		<a class="nav-titles"></a>
		<div class="nav-dropdown"></div>
	</li>
	<li>
		<a class="nav-titles"></a>
		<div class="nav-dropdown"></div>
	</li>
	<li>
		<a class="nav-titles"></a>
		<div class="nav-dropdown"></div>
	</li>
	<li>
		<a class="nav-titles"></a>
		<div class="nav-dropdown"></div>
	</li>
</nav>

问题在于它更改了所有下拉菜单的类，而不仅仅是单击按钮的类。我可以做任何事情，以便它只更改其 .nav-titles 按钮正下方的 .nav-dropdown 吗？

根据要求添加了 HTML 结构。

Answer 1

您需要找到父 li 元素，并在其上查找下拉类:

$('.nav-titles').on('click', function() {
    $(this).closest('li').find('.nav-dropdown').toggleClass('nav-dropped-down');
});