jQuery – 如何使用子DIV显示/隐藏多个DIV

我有一个标记如下（代码从http://jsfiddle.net/nick_craver/srg6g/修改）：

 
London & South East
 
South West, Ireland and Wales
 
South Central & Home Counties
 
North England, Northern Ireland & Scotland
 
Midlands
 
 

 
 
 
content london 1
 
content london 2
 
 
 
content south west 1
 
content south west 2
 
 
 
content south central 1
 
content south central 2
 
 
 
content north 1
 
content north 2
 
 
 
content midlands 1
 
content midlands 2
 
  

我的JavaScript代码如下所示：

 $(".map-box a").click(function(e) { $("#areas div").hide(); $(this.hash).show(); e.preventDefault(); }); $("#areas div").not("#london, #london div").hide(); 

当用户点击图像时，我想隐藏当前显示的内容并显示与该图像相关联的内容，但这不起作用。

例如，

• 用户点击“西南”
• 显示“内容西南1”和“内容西南2”

有人能告诉我我做错了什么吗？

Answer 1

问题是这一行上的选择器：

 $("#areas div").hide(); 

这是选择并隐藏作为“#areas”div的后代的所有div元素，其中不仅包括具有像“london”等的id的div，而且还包括那些div的子节点。 然后，当您显示基于像“伦敦”这样的id的div时，其子div与实际内容保持隐藏状态。

试试这个：

 $("#areas > div").hide(); 

同样对于最初隐藏它们的线：

 $("#areas > div").not("#london, #london div").hide();​ 

这将只隐藏“#areas”直接孩子的div。 虽然他们隐藏了他们的孩子也会被隐藏，但是当你展示一个孩子时，它的孩子会自动出现。

演示： http ： //jsfiddle.net/7s5nP/