jQuery .show（） – 显示/隐藏多个元素

我想要实现这个目标：

1. 创建一个包含多个列表的页面，每个列表都包含一个嵌套列表，以便在单击链接时显示。

2. 单击链接并显示内容时，单击其他链接时，将隐藏先前显示的内容，并显示新内容。

3. 单击页面上任何位置远离显示的内容时，此单击将隐藏该项目。

这是一个笔显示揭示动作按预期工作，但这不是我迄今为止的function。

http://codepen.io/juxprose/pen/pzvuC

任何指针都将非常感激。

谢谢。

Answer 1

试试这个：

$('.trigger').click(function (e) { e.stopPropagation(); $('.show').hide(); $(this).next('.show').slideDown(); }); $(document).click(function () { $('.show').slideUp(); }); 

FIDDLE DEMO

Answer 2

如果我理解的话，这段代码应该做你想要的：

HTML：

 
 
Item1 
 
Item 1.1
 
Item 1.2
 
Item 1.3
 
 
 
Item2 
 
Item 2.1
 
Item 2.2
 
Item 2.3
 
 
 
Item3 
 
Item 3.1
 
Item 3.2
 
Item 3.3
 
 
  

js：

 $(document).ready(function() { $("#listItems ul").hide(); $("#listItems a").on("click", function() { $("#listItems ul").hide(); $(this).next().show(); }); $(document).click(function(e) { if ( $(e.target).closest('#listItems').length === 0 ) { $("#listItems ul").hide(); } }); }); 

Answer 3

试试这个，

 $('.trigger').click(function(){ $('.show').slideUp(); $(this).next('.show').slideDown(); }); 

小提琴 http://jsfiddle.net/8jedA/