1

我有一个如下标记（代码从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”

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

4

1 回答 1

2

问题是这一行的选择器：

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

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

试试这个：

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

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

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

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

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

于 2012-04-23T10:44:08.247 回答