如何使用jQuery Toggle定位具有公共类的特定元素？

Question

我正在创建一个下拉菜单，该菜单将在一个页面上重复使用多次。

当只有一个下拉菜单时，以下代码效果很好。但是当有多个下拉菜单时，点击一个.dropdown将导致页面上的所有.dd_menu被显示出来。

JS：

$(document).ready(function() {
   $('.dropdown').click(function(){
      $('.dd_menu').toggle();
   });
});

HTML：

<div class="dropdown">
    <a class="mini_button" href="#">Actions</a>

    <div class="dd_menu">
        <a href="http://example.com">Link</a>
        <a href="http://example.com">Link</a>
        <a href="http://example.com">Link</a>
    </div>
</div>

是否只有针对特定.dd_menu点击内的.downdown的内容？

Answer 1

将选择器限制为.dd_menu，它是当前点击的.dropdown div的子项：

$(document).ready(function() {
   $('.dropdown').click(function(){
      $('.dd_menu', this).toggle(); // <========== used this as a context.
   });
});

jQuery( selector [, context] )：

• selector包含选择器表达式
的字符串
• context DOM元素，文档或jQuery用作上下文

docs

您也可以使用find函数：$(this).find('.dd_menu')但它完全相同。上下文选择器正在调用find函数。

Answer 2

你可以尝试：

$(this).children('.dd_menu').toggle();

Answer 3

$(document).ready(function() {
   $('.dropdown').on('click', 'a', function(){
       $('.dd_menu:eq('+$(this).parent().index()+')').toggle();
   });
});​