带有子菜单触发器的jQuery菜单

我正在尝试为HTML菜单创建一个触发器，单击此按钮将切换子菜单。 以下代码的问题是当您单击触发器（class =“open”）时，它会立即切换所有子菜单项。 我想使用jQuery一次切换一个子菜单的触发器。 这是我的代码：

HTML

 
Item 1
 + 
 
Sub Item 1
 
Sub Item 2
 
Sub Item 3
 + 
 
Sub Sub Item 1
 
Sub Sub Item 2
 
Sub Sub Item 3
 
Sub Sub Item 4
 
Sub Sub Item 5
 
 
Sub Item 4
 
Sub Item 5
  

JQUERY

 $(document).ready(function() { $('.open').click(function () { $('li.menu-item-has-children').parent().closest('.sub-menu').toggle(); }); }); 

CSS

 ul li { list-style-type:none; } .open { width:20px; height:20px; background-color:red; color:#fff; display:block; cursor:pointer; text-align:center; } .sub-menu { display:none; } 

在这里查看JS FIDDLE

谢谢 ：）

Answer 1

这里没有上下文。 它应该是：

 $(document).ready(function() { $('.open').click(function () { $(this).next('.sub-menu').toggle(); }); }); 

当你使用$('li.menu-item-has-children') ，它会选择字面上的所有内容，而不是单击的内容。 触发click事件的当前元素可以通过this关键字获得，我已经使用它来使其工作。 由于你有一个完美的结构，如子菜单在 ，上面的代码与.next() 。

片段

 $(document).ready(function() { $('.open').click(function () { $(this).next('.sub-menu').toggle(); }); }); 

 ul li { list-style-type:none; } .open { width:20px; height:20px; background-color:red; color:#fff; display:block; cursor:pointer; text-align:center; } .sub-menu { display:none; } 

  
 
Item 1
 + 
 
Sub Item 1
 
Sub Item 2
 
Sub Item 3
 + 
 
Sub Sub Item 1
 
Sub Sub Item 2
 
Sub Sub Item 3
 
Sub Sub Item 4
 
Sub Sub Item 5
 
 
Sub Item 4
 
Sub Item 5
   

Answer 2

其他选项是为sub-menu创建另一个类。

 $(document).ready(function() { $('.open').click(function () { $('li.menu-item-has-children').parent().closest('.sub-menu').toggle(); }); $('.open-sub1').click(function () { $('.sub-menu1').toggle(); }); }); 

 ul li { list-style-type:none; } .open, .open-sub1 { width:20px; height:20px; background-color:red; color:#fff; display:block; cursor:pointer; text-align:center; } .sub-menu, .sub-menu1 { display:none; } 

  
 
Item 1
 + 
 
Sub Item 1
 
Sub Item 2
 
Sub Item 3
 + 
 
Sub Sub Item 1
 
Sub Sub Item 2
 
Sub Sub Item 3
 
Sub Sub Item 4
 
Sub Sub Item 5
 
 
Sub Item 4
 
Sub Item 5