6

重複の可能性:
親要素が display:none の場合に HTML 子要素を表示する

別のdivの中にdivがあります。外側の div をdisplay:noneこれに設定すると、内側の div も非表示になります。内側の div を表示し、外側の div を表示しないように設定するにはどうすればよいですか?

CSS:

.hidden {
    width:100px;
    height:100px;
    background-color:red;
    display:none;
}

.display {
    width:50px;
    height:50px;
    background-color: yellow;
    display:block;
}

HTML:

<div class="hidden">
    <div class="display"></div>
</div>

例: http://jsfiddle.net/gcyhz/1/

4

5 に答える 5

7

display: noneこれを実装する最も簡単な方法は、transparent色の使用を避けて使用することです。

.hidden {
    width:100px;
    height:100px;
    color: transparent;
    background-color: transparent;
}

.display {
    width:50px;
    height:50px;
    color: #000;
    background-color: yellow;
    display:block;
}

JS フィドルのデモ。

visibilityの代わりに使用するオプションもありますdisplay: none。

.hidden {
    width:100px;
    height:100px;
    visibility: hidden;
}

.display {
    width:50px;
    height:50px;
    color: #000;
    background-color: yellow;
    visibility: visible;
}

JS フィドルのデモ。

ただし、これにより、visibility: hidden要素は DOM で割り当てられたスペースを占有しますが、明らかに空のままになります (したがって、物理的なサイズがまだあり、ページに表示されないだけです)。ただし、子要素はそのプロパティをオーバーライドできます。宣言するvisibility: visible。

正直なところ、後者の提案は事実上、最初の提案とまったく同じであり、一部のブラウザーで発生する可能性のある問題を回避するだけですtransparent(colorどのブラウザーでこの問題が発生したかは思い出せませんが、以前のバージョンだったようですIE ですが、その回想を裏付ける文書を参照することはできません)。

残念ながら、display: none親の宣言を子要素でオーバーライドすることはできませんopacity。

前述のように、最も簡単な解決策は、単純に要素を親から移動し、継承の問題を補うのではなく回避することです。

于 2013-01-30T16:26:05.713 に答える
2

残念ながら、これは不可能です。別のソリューションを設計する必要があります。(おそらく、表示する必要がある場合は、非表示の div から内側の div を移動しますか?)

于 2013-01-30T16:22:31.550 に答える
1

親要素（要素A）を設定するdisplay:none;と、（非常に簡単な説明で）ページから要素が削除され、他の要素が要素Aがページ上にないかのように動作します。とは対照的にvisibility:hidden;。に設定するとdisplay:none;、その要素とその子を非表示にする必要があります。

私の知る限り、それを回避する方法はありません。

于 2013-01-30T16:25:02.203 に答える
0

要素に設定display: noneすると、その要素がDOMに存在しないように見えます（視覚的なスペースは必要ありません）。別の要素の中にある要素display: noneを実際に表示することはできません。

于 2013-01-30T16:25:00.953 に答える
0

jquery.unwrap()はトリックを行うようです：

$(".display").unwrap();

（私は多くのデータを持っていますが、私の場合はこれをサーバー側で行うのが最善です）

于 2013-01-30T17:09:36.120 に答える