单击切换下拉菜单

我正在尝试创建一个下拉菜单，该菜单在点击时激活，而不是在hover时激活。 到目前为止，我点击了一点点javascript，但是子菜单显示得很好，如果点击了其他菜单，其他子菜单隐藏了，如果单击其父菜单，我无法弄清楚如何隐藏子菜单。

EG在这个JS小提琴中我可以点击“父母1”来揭示它的孩子，当我点击“父母2”父母1的孩子隐藏和父母2的孩子显示。 但是，如果父母1的孩子表明我希望能够通过再次点击父母1来隐藏他们（或者甚至更好地在孩子外面的任何地方）

我已经看到了一些示例，其中每个父级和子菜单都有单独的类或ID。 我想避免这种情况，因为它需要在cms中工作。

这是我的基本代码

HTML：

 
 
Parent 1 
 
Parent 1 » Child 1
 
Parent 1 » Child 1
 
Parent 1 » Child 1
 
 
 
Parent 2 
 
Parent 2 » Child 2
 
Parent 2 » Child 2
 
Parent 2 » Child 2
 
 
 
Parent 3 
 
Parent 3 » Child 3
 
Parent 3 » Child 3
 
Parent 3 » Child 3
 
 
  

javascript：

 $(document).ready(function () { $("li").click(function () { $('li > ul').hide(); $(this).children("ul").toggle(); }); }); 

CSS可能不是必需的，但如果需要它可以在小提琴上

Answer 1

试试这种方式。

 $(document).ready(function () { $("li").click(function () { //Toggle the child but don't include them in the hide selector using .not() $('li > ul').not($(this).children("ul").toggle()).hide(); }); }); 

演示

Answer 2

检查这个小提琴

http://jsfiddle.net/Kritika/SZwTg/1/

  $(document).ready(function () { $("li").click(function () { $('li > ul').not($(this).children("ul")).hide(); $(this).children("ul").toggle(); }); }); 

要么

  $(document).ready(function () { $("li").click(function () { var submenu=$(this).children("ul"); $('li > ul').not(submenu).hide(); submenu.toggle(); }); }); 

点击“父母1”，它会显示其子女，当您点击“父母2”时，父母1的孩子会隐藏，父母2的孩子会显示。 如果父1的孩子显示你可以通过再次单击父1来隐藏它们。

Answer 3

最好在切换位置使用slideToggle：

 $(document).ready(function () { $("li").click(function () { $('li > ul').not($(this).children("ul")).hide(); $(this).children("ul").slideToggle('slow'); }); 

}）;