Отображать дочерний элемент HTML при отображении родительского элемента: none

Есть ли какой-либо механизм для отображения дочернего элемента, когда отображается его родительский элемент: none?

Ситуация - это ошибка проверки на скрытой вкладке. Я хочу вывести сообщение об ошибке, даже если поле скрыто.

Действительно упрощенная JSFiddle ситуации находится здесь http://jsfiddle.net/vLYnk/

Разметка:

<ul>
    <li>One</li>
    <li class="hide">
        Two
        <ul>
            <li class="reshow">Re Show Me</li>
            <li>Inner 2</li>
        </ul>
    </li>
    <li>Three</li>
</ul>

CSS

.hide {display: none}
.reshow {display: block !important; position: fixed; top: 0; left: 0;}

Я предполагаю, что это невозможно, поскольку у ребенка не будет никакого контекста, но на всякий случай???

Ответ 1

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

EDIT:

Это может быть так, как вы хотите, если вы можете переключиться с display на visibility.

.hide {visibility: hidden;}
.reshow {visibility: visible;}

Используя этот метод, вы можете скрыть содержимое родительского элемента, но показать конкретный <li>, который вы хотите. Единственное предостережение - родительская разметка, которая по-прежнему будет занимать экранную недвижимость. Просто не будет отображаться пользователю. Это может или не может сломать макет, который вы ищете.

http://jsfiddle.net/vLYnk/2/

Ответ 2

Нет, это невозможно. Вместо этого вы можете переместить дочерний элемент из скрытого родителя и вставить его где-нибудь еще в разметке (например, через JavaScript).

Ответ 3

Вместо использования дисплея вы можете: none; чтобы скрыть ваш элемент, выведите его из окна просмотра через позицию: relative/absolute; и осталось: -9999em; Затем дайте видимому ребенку положение: относительное; и left: 9999em;

Падение этого решения заключается в том, что элемент "reshown" находится вне потока элементов, если вы использовали позицию: absolute. (Не занимая нужное пространство, а не выдвигая следующие элементы) Или что вы занимаете больше места, чем это действительно необходимо, при использовании позиции: относительная.

http://jsfiddle.net/vLYnk/3/

Ответ 4

Для конкретных ситуаций вы можете использовать это:

.hidden-container *{display:none;}
.hidden-container .show-again{display:block}

Будет отображаться .hidden-container, но все, кроме контейнера .show-again, будет иметь свойство отображения, установленное на none.

jsFiddle

EDIT:

обратите внимание, что он будет reset отображать все свойства childs из .hidden-container, если они объявлены после их стилей.

Ответ 5

$('body').append($('.reshow').clone(true));

Ответ 6

Просто добавьте .hide:

font-size: 0;
margin: 0;
padding: 0;

Он не будет занимать место так же, как не отображать