将 div 的显示设置为 none 会隐藏所有子 div

Question

我有一个包含几个 div 的页面，它们的显示设置为 none，然后每当用户单击关联的 li 时通过 jquery 进行切换：

<ul id="switches">
    <li id="home" style="cursor: hand; cursor: pointer">HOME</li>
    <li id="vouchers" style="cursor: hand; cursor: pointer">GIFT VOUCHERS</li>
    <li id="reservations" style="cursor: hand; cursor: pointer">RESERVATIONS</li>       
    <li id="contact">
        <img src="images/loc.png" style="cursor : hand; cursor: pointer" />
    </li>
    <li id="menu">
        <img src="images/menu.png" style="cursor: hand; cursor: pointer" />
    </li>
</ul>

我从这个答案中得到的切换代码：https://stackoverflow.com/a/34710/914602

每当有人点击“home” li 时，我都会显示“content_home” div 等。

<div id="content" style="float: right; width: 500px; margin-top: 15px">
    <div id="content_home" class="active">
        home
    </div>
    <div id="content_vouchers">
        voucher
    </div>
    <div id="content_reservations">
        reserv
    </div>
    <div id="content_contact">
        <div id="map_canvas" style="width:480px; margin-left:20px; height:300px">
        </div>
    </div>
    <div id="content_menu">
        menu
    </div>
</div>

在我的“content_contact”div 上，我有另一个 div，我设置它包含一个 Google 地图（请参阅此处：http://code.google.com/p/jquery-ui-map/）。

但是，如果“content_contact”div 的显示设置为无（通过单击其他链接之一），则它包含的所有 div 也会被隐藏。当我再次将显示设置为阻止时，仅设置了父级，而不是子级。 （所以...如果我单击“home”，则会显示“content_home”。当我单击“contact”时，会显示“content_contact”，但它包含的 div（包括地图）的显示仍设置为无）。

如果我枚举所有“content_contact”的孩子，将它们的显示设置为再次阻止，当然，地图 div 会显示，但地图 内部的所有 div 也会显示（类似地图数据叠加层、用于选择卫星/道路样式地图的菜单、街景菜单等）：

_{（来源：1sttime.co.za）}

有没有办法只将父 div 设置为不可见，而让子 div 保持原样？

Answer 1

我敢打赌，这与您隐藏其他内容的方式有关。

我在这里有一个简化的例子，似乎可行：

http://jsfiddle.net/jtbowden/3WSnD/

从$('#content > div').hide(); 中删除“>”，您将看到不同之处。

Answer 2

不。所有元素都有自己的显示值，但如果父元素有 display:none，那么它的子元素也不会显示。如果您希望在隐藏其父级时显示它，则必须从 #content_contact 中删除 #map_canvas。

地图问题可能是谷歌地图独有的，它不能很好地与 display:none 配合使用。与其将其设置为 display:none，不如尝试将其绝对定位并将其移出屏幕（例如：left:99999px），然后在您想再次显示时将其带回来。