jQuery的 - 如何显示/隐藏与孩子的DIV

Question

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

<div id="maps"> 
    <div class="map-box"><h2>London &amp; South East</h2><a href="#london"><img src="http://dummyimage.com/100x100/000/fff&text=London" /></a></div> 
    <div class="map-box"><h2>South West, Ireland and Wales</h2><a href="#south-west"><img src="http://dummyimage.com/100x100/000/fff&text=South+West" /></a></div>  
    <div class="map-box"><h2>South Central &amp; Home Counties</h2><a href="#south-central"><img src="http://dummyimage.com/100x100/000/fff&text=South+Central" /></a></div> 
    <div class="map-box"><h2>North England, Northern Ireland &amp; Scotland</h2><a href="#north"><img src="http://dummyimage.com/100x100/000/fff&text=North" /></a></div> 
    <div class="map-box"><h2>Midlands</h2><a href="#midlands"><img src="http://dummyimage.com/100x100/000/fff&text=Midlands" /></a></div> 
</div> 
<br /><br/> 
<div id="areas"> 
    <div id="london"> 
     <div>content london 1</div> 
     <div>content london 2</div> 
    </div> 
    <div id="south-west"> 
     <div>content south west 1</div> 
     <div>content south west 2</div> 
    </div> 
    <div id="south-central"> 
     <div>content south central 1</div> 
     <div>content south central 2</div> 
    </div> 
    <div id="north"> 
     <div>content north 1</div> 
     <div>content north 2</div> 
    </div> 
    <div id="midlands"> 
     <div>content midlands 1</div> 
     <div>content midlands 2</div> 
    </div> 
</div> 

而且我的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”分区，它包括包含“伦敦id，而不是仅仅的div的后代所有div元素“等，但这些divs的孩子也是如此。然后，当你显示一个基于像“伦敦”的ID的div时，其子div与实际内容保持隐藏。

试试这个：

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

同样地，对于最初隐藏它们行：

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

，将隐藏仅是“#areas”直接孩子的div。当他们被隐藏时，他们的孩子也会隐藏起来，但是当你展示一个孩子时，他们的孩子会自动出现。

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