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');
});

Answer 2

事实是，您不能单击nav-titles类，因为它是由其li父级包装的，因此您必须为click＆不是nav-titles类选择li标签，然后在其中搜索nav-dropdown类它的。

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

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

 .nav-dropped-down { height:20px; background-color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>