親は非表示ですが、子はまだ表示されます(表示したくないです)!質問する

親は非表示ですが、子はまだ表示されます(表示したくないです)!質問する

さて、Web ページ内の親 DIV 要素にいくつかの複製された DOM 要素を追加する必要がある状況がありました。

私には、これらの親 DIV ホルダーが 4 つありました。それらの可視性を、表示から非表示に切り替えると、非常に奇妙なことが起こります。ページの読み込み後に追加されたすべての子が、表示されたままになるのです。

ソースコードをダウンロードするためのリンクは次のとおりです:http://www.clarencebowman.com/parent-child-visibility/parent-child-visibility.zip

この現象を直接見るためのリンクはこちらです:http://www.clarencebowman.com/parent-child-visibility

ページの読み込み後、いくつかのマゼンタ色の子要素が追加された赤いボックスが表示されます。ページの下部に表示/非表示ボタンがあります。

子要素が実際にその可視性を適切に継承していることを示すために、親 DIV に緑のストライプを追加しました。

しかし、複製された子要素を追加して親 DIV を非表示にすると、複製された子要素はどれも消えません。

複製スクリプトを実行する前に、複製する子要素を親 DIV 内に配置してみましたが、違いはありませんでした。

ページの読み込み後に追加された子要素は、何らかの理由で親 DIV 要素 (赤いボックス) との継承リンクを失っているようです。

他にもこのような経験をした人はいますか? 子の継承を修復/交換/再割り当てする簡単な方法はありますか?

jQuery 1.5 を使用しています。

ベストアンサー1

他の多くの人は単に使用することを言及していますdisplay: noneが、ご存知のとおり、これはvisibilityプロパティを使用する場合とはまったく異なる動作になります。

1 つできることは、/の代わりにhidden/を使用することです。これにより、親のいずれかが表示されていない場合を除き、要素がデフォルトで表示されるようになります。これが必要な動作です。inherithiddenvisibleinherit

おすすめ記事