Установка показа div для none скрывает все дочерние div

Question

У меня есть страница, которая содержит пару элементов div, отображение которых установлено на none, а затем переключается с помощью jquery всякий раз, когда пользователь нажимает на связанный li:

<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, я показываю div "content_home" и т. д.

<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>

На моем div "content_contact" у меня есть другойdiv, который я установил, чтобы он содержал карту Google (см. здесь: http://code.google.com/p/jquery-ui-map/).

Однако, если отображение div "content_contact" установлено на none (при нажатии на одну из других ссылок), все divs этоСодержимое также скрыто. Когда я снова устанавливаю отображение на блокировку, только устанавливается родитель, а не дети. (так что ... Если я нажимаю «home», отображается «content_home». Когда язатем нажмите «contact», отобразится «content_contact», но элементы div, которые он содержит (включая отображение карты), по-прежнему не имеют значения).

Если я перечислю все дочерние элементы «content_contact», установив их отображение, чтобы снова заблокировать, конечно же, карту диv отображается, но также отображаются все элементы div внутри карты (например, наложение данных карты, меню для выбора карты стиля спутника / дороги, меню StreetView и т. д.):

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

Есть ли способ сделать родительский div невидимым, оставив потомков такими, какие они есть?

Answer 1

Могу поспорить, это связано с тем, как вы скрываете свой другой контент.

У меня есть упрощенный пример, который, кажется, работает:

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

Удалите '>' из $('#content > div').hide();, и вы увидите разницу.

Answer 2

Неа.Все элементы имеют свои собственные отображаемые значения, но если у родителя есть display: none, его дочерние элементы также не будут отображаться.Вам нужно удалить #map_canvas из #content_contact, если вы хотите, чтобы он отображался, когда его родитель скрыт.

Проблема с картой может быть уникальной для Карт Google, которые не очень удобны для отображения: нет.Вместо того, чтобы установить его на отображение: нет, вы можете попробовать позиционировать его абсолютно и отодвинуть его от экрана (например: left: 99999px), а затем вернуть его, когда вы захотите отобразить его снова.