親が非表示の場合に HTML で非表示の子要素を表示する方法

非表示の子要素の表示

HTML では、要素の表示プロパティを「none」に設定すると、その要素が表示されなくなります。ただし、非表示の親要素内の子要素を表示する必要がある場合はどうなりますか?

元のクエリ

ユーザーがネストされた順序なしリストを操作中にこの問題が発生しました。彼らは、親リスト項目が非表示になっている場合でも、子リスト項目に検証エラー メッセージを表示したいと考えていました。従来の通念では、親が表示されていない場合、子要素のコンテキストが欠如しているため、これは不可能である可能性があると示唆されていました。

解決策

それは不可能ですが親要素が display: none であるときに子要素を直接表示するには、同様の機能を提供する別のアプローチがあります:

表示を設定する代わりに Visibility を使用する

親要素のプロパティを「none」に設定した場合は、visibility プロパティを「hidden」に設定します。これにより、ビューから親要素が削除されますが、その子要素は引き続き表示されます。

CSS の例:

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

.reshow {
    visibility: visible;
    position: fixed;
    top: 0;
    left: 0;
}</code>

マークアップの例:

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

このメソッドを使用すると、親要素は非表示のままですが、クラス「reshow」を持つ子要素が表示され、画面の左上に配置されます。

追加の考慮事項

• 親要素は、非表示であっても、レイアウト内のスペースを占有します。これは、ページ全体の外観に影響を与える可能性があります。
• この方法は、親要素が絶対に配置されているか、特定の高さと幅が設定されている場合にのみ機能します。
• この方法を使用することはお勧めできません。混乱やアクセシビリティの問題につながる可能性があるため、広範囲に適用されます。

以上が親が非表示の場合に HTML で非表示の子要素を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。