부모가 숨겨져 있는 동안 숨겨진 자식 요소를 표시하는 방법은 무엇입니까?

숨겨진 하위 요소 표시

특정 상황에서는 CSS 표시를 사용하여 상위 요소가 숨겨져 있어도 하위 요소를 표시하고 싶을 수 있습니다. : 없음. 이는 숨겨진 필드에 대한 유효성 검사 오류를 표시하는 등의 시나리오에 유용할 수 있습니다.

그러나 이 동작은 CSS에서 기본적으로 지원되지 않는다는 점에 유의하는 것이 중요합니다. 상위 요소가 숨겨지면 시각적 DOM에서 상위 요소와 해당 하위 요소가 모두 효과적으로 제거됩니다.

가시성을 사용한 가능한 솔루션

디스플레이를 사용하는 경우: none은 그렇지 않습니다. 본질적으로, 대안적인 접근 방식은 대신 CSS visible: Hidden을 사용하는 것입니다. 이 속성은 하위 요소를 포함하여 요소의 콘텐츠를 숨기지만 여전히 레이아웃에서 해당 위치를 유지합니다.

visibility:hidden을 사용하면 원하는 하위 요소를 표시하면서 상위 요소를 숨길 수 있습니다. 이 기술은 숨겨진 상위 요소를 효과적으로 무시하여 하위 요소가 표시되도록 합니다.

코드 예제

제공된 JSFiddle 예제에서:

<code class="html"><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></code>

<code class="css">.hide {
    visibility: hidden;
}

.reshow {
    visibility: visible;
}</code>

이 경우 visible: hide 클래스가 hide인 상위 요소는 숨겨지지만 reshow 클래스가 있는 하위 요소는 계속 표시됩니다. 이렇게 하면 상위 필드가 숨겨져 있어도 유효성 검사 오류 메시지가 표시될 수 있습니다.

이 접근 방식은 레이아웃에서 상위 요소의 공간을 유지하므로 모든 시나리오에 이상적이지 않을 수 있습니다.

위 내용은 부모가 숨겨져 있는 동안 숨겨진 자식 요소를 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!