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(); 

これで選択し、「ロンドンなどのIDを持つだけでなく、div要素を含む「#areas」のdivの子孫であるすべてのdiv要素を隠し"など、しかしdivsの子供も。その後、 "london"のようなIDに基づいてdivを表示すると、実際のコンテンツを持つ子divは隠されたままになります。

代わりにこれを試してみてください：最初にそれらを隠すためのライン

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

、同様に：「#areas」の直接の子であるだけdivを非表示になります

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

。彼らは隠されている間、彼らの子供も隠されますが、あなたが1つを表示すると、その子供は自動的にそれと共に表示されます。

デモ：http://jsfiddle.net/7s5nP/