59

親要素が display: 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;}

子供にはコンテキストがないため、これは不可能だと思いますが、念のため???

4

6 に答える 6

62

いいえ、これは不可能です。display:none要素を非表示にするため、子要素は表示されません。

編集：

display使用からに切り替えることができれば、これはあなたが望むものに沿っているかもしれませんvisibility。

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

このメソッドを使用すると、親要素の内容を非表示にし、必要な特定の要素を表示でき<li>ます。唯一の注意点は、親のマークアップが引き続き画面の領域を占めることです。ユーザーには表示されません。それはあなたが探しているレイアウトを壊すかもしれないし、壊さないかもしれません。

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

于 2012-10-18T14:27:59.283 に答える
5

いいえ、これは不可能です。代わりに、子要素を非表示の親から移動して、マークアップの別の場所に挿入することができます（JavaScriptなどを使用）。

于 2012-10-18T14:28:22.340 に答える
4

特定の状況では、これを次のいずれかで使用できます。

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

それは表示されたままになりますが、コンテナを.hidden-container除くすべての表示プロパティが に設定されます。.show-againnone

jsフィドル

編集：

.hidden-containerスタイルの後に宣言されている場合、子のすべての表示プロパティがリセットされることに注意してください。

于 2014-04-07T16:05:53.167 に答える
3

display: none; を使用する代わりにできます。要素を非表示にするには、position: relative/absolute; を介してビューポートの外に移動します。左: -9999em; 目に見える子に位置を与えるよりも：相対; 左: 9999em;

このソリューションの欠点は、position: absolute を使用した場合、「再表示」要素が要素フローから外れることです。(必要なスペースを占有せず、次の要素を押し下げません) または、position: relative を使用するときに、実際に必要なスペースよりも多くのスペースを占有します。

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

于 2012-10-18T14:38:32.150 に答える
1 
$('body').append($('.reshow').clone(true));
于 2012-10-18T14:32:03.790 に答える