jQuery：切换 - 列表

Question

这是这里的延续： jQuery：列表在页面上展开 自从我上一篇文章

嗨，

以来，我已经研究了另一个列表并提出了这个： http ://jsbin.com/emaza4/4

如您所见，第一个

元素带有

子元素（item ' #') 在页面加载时自动打开，其他“父项”保持关闭状态，直到单击其中任何一个。我通过将项目“#”放在“abc”类下并将其余项目放在“xyz”类下来实现此目的。

接下来，我希望能够单击另一个父项，例如项目“AF”，它会自动关闭任何其他打开的父项，包括来自不同类的项目“#”（“abc”而不是“xyz”）。

在此网站上搜索“toggle”导致我发现： 动态切换 jQuery

所以我尝试添加到我的代码中像这样： http://jsbin.com/emaza4/3/ 但似乎没有正在工作。

有人能指出我如何解决这个问题的正确方向吗？提前致谢。 :)

Answer 1

您可以只使用 .toggle('slow') (.hide('slow'))，在兄弟姐妹上每个处理程序中单击的

的数量，如下所示：

$(this).siblings().children().hide('slow');

您可以测试它在这里。

Answer 2

我相信你把问题搞得太复杂了。您所需要的只是单击隐藏所有子菜单并打开相关菜单。例如。

$('li').click(function (){
  $('ul').hide();
  $(this).find('ul').show();
});