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/