jQuery切换div的孩子

我有以下HTML代码：

 Menu 
submenu1
 
submenu2
 
 
 Menu2 
submenu3
 
submenu4
  

class hidden有display:none

当我点击单词菜单或menu2时，我正试图让切换工作

Answer 1

 $('.dim').click(function(){ $('.hidden', this).toggle(); // p00f }); 

小提琴： http ： //jsfiddle.net/maniator/V4X4t/

---

更新

检查点击的dim元素：

 $('.dim').click(function(event){ var isDim = $(event.target).is('.dim'); if(isDim){ //make sure I am a dim element $('.hidden', this).toggle(); // p00f } }); 

小提琴： http ： //jsfiddle.net/maniator/V4X4t/5/

Answer 2

 $('.dim').on('click', function () { //$(this).children('.hidden').toggleClass('.hidden');//as-per AndreasAL's suggestion $(this).children('.hidden').toggle(); }); $('.hidden').on('click', function (event) { event.stopPropagation(); }); 

这是一个演示： http ： //jsfiddle.net/76uTr/

这会在单击.dim元素时显示/隐藏.hidden元素，但它也允许您单击.hidden元素而不切换它的可见性。

请注意，我使用.find() .children()而不是.find() ，它只选择根元素（ .dim ）的直接后代。

还要注意.on()是jQuery 1.7中的新增内容，在这种情况下与.bind()相同。

UPDATE

使用event.stopPropagation()我们可以允许自己嵌套元素，不要让事件冒泡并触发多个事件处理程序：

 $('.dim').on('click', function (event) { event.stopPropagation(); $(this).children('.hidden').toggle(); }); $('.parent').on('click', function () { $(this).children('.dim').toggle(); }); $('.hidden').on('click', function (event) { event.stopPropagation(); }); 

这是一个演示： http ： //jsfiddle.net/76uTr/1/

这里.parent元素被假定为.dim元素的直接父元素。

Answer 3

只需附加一个click事件处理程序，并检查当前元素是否是被单击的元素：

 $('.dim').click(function(e) { if (e.target == this) { $(this).children().toggle(); } }); 

这是小提琴： http ： //jsfiddle.net/V4X4t/6/

Answer 4

看看本教程可能会给你一个想法

Answer 5

在Menu和Menu2上创建锚点

 
 Menu 
submenu1
 
submenu2
 
 
 Menu2 
submenu3
 
submenu4
  

和脚本：

 $(".dim > a").click( function ( e ){ e.preventDefault() // prevent default action - hash doesn't appear in url $( this ).parent().find( "div" ).toggleClass( "hidden" ); }); 

单击属于它的链接子菜单中的任何一个将出现或消失

现场演示： http ： //jsfiddle.net/ZxwpJ/