1

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

当只有一个下拉菜单时，以下代码效果很好。但是当有多个下拉菜单时，单击一个.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内容中的内容？

4

3 回答 3

4

将选择器限制为.dd_menu当前单击的.dropdowndiv 的子项：

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

jQuery( selector [, context] )：

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

文档

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

于 2012-05-07T12:02:10.880 回答
0

你可以试试：

$(this).children('.dd_menu').toggle();
于 2012-05-07T12:03:42.960 回答
-1 
$(document).ready(function() {
   $('.dropdown').on('click', 'a', function(){
       $('.dd_menu:eq('+$(this).parent().index()+')').toggle();
   });
});​
于 2012-05-07T12:08:56.477 回答