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的显示设置为none（通过单击其中一个链接），则它所包含的所有div也会被隐藏。当我再次将显示设置为阻止时，仅设置父级，而不是子级。（所以...如果我点击“home”，则会显示“content_home”。当我点击“contact”时，会显示“content_contact”，但它包含的div（包括地图）的显示仍然设置为无）。

如果我枚举所有“content_contact”的孩子，将他们的显示设置为再次阻止，当然，会显示地图div，但地图中的所有div 也会显示（类似的东西）地图数据叠加，选择卫星/道路风格地图的菜单，街景菜单等）：

error http://www.1sttime.co.za/error.jpg

有没有办法只将父div设置为不可见，同时保持子项不变？

Answer 1

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

地图问题可能是Google地图所独有的，因为它与display：none无关。而不是将其设置为显示：无，您可能想要尝试绝对定位并将其移出屏幕（例如：左：99999px），然后在想要再次显示时将其恢复。

Answer 2

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

我在这里有一个似乎有效的简化示例：

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

删除'＆gt;'来自$('#content > div').hide();，你会发现差异。

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

2 个答案: