親が非表示になっているときに、非表示の子要素を表示するにはどうすればよいですか?

非表示の子要素の表示

特定の状況では、CSS 表示を使用して親要素が非表示になっている場合でも、子要素を表示したい場合があります。 ： なし。これは、非表示フィールドの検証エラーを表示するなどのシナリオに役立ちます。

ただし、この動作は CSS によって本質的にサポートされていないことに注意することが重要です。親要素が非表示になると、親とその子の両方がビジュアル DOM から効果的に削除されます。

可視性を使用した考えられる解決策

表示を使用する場合: none は非表示です。重要なことは、代わりに CSS の可視性: 非表示を使用することです。このプロパティは、子を​​含む要素のコンテンツを非表示にしますが、レイアウト内でのその場所は確保されています。

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>

この場合、visibility: hidden は、クラスの Hide で親要素を非表示にしますが、クラス reshow の子要素は表示されたままになります。これにより、親フィールドが非表示であっても検証エラー メッセージが表示されるようになります。

このアプローチでは、レイアウト内で親要素のスペースが維持されますが、すべてのシナリオで理想的であるとは限らないことに注意してください。

以上が親が非表示になっているときに、非表示の子要素を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。