Wie zeige ich ein untergeordnetes Element an, wenn sein übergeordnetes Element ausgeblendet ist?

So enthüllen Sie ein untergeordnetes Element innerhalb eines verborgenen übergeordneten Elements

Im Bereich der Webentwicklung ist es oft wünschenswert, bestimmte Elemente gleichzeitig anzuzeigen andere verborgen halten, insbesondere innerhalb verschachtelter Strukturen. Die Herausforderung entsteht, wenn versucht wird, ein untergeordnetes Element innerhalb eines ausgeblendeten übergeordneten Elements anzuzeigen.

Das Frage:

如何在一个隐藏的父元素内显示一个子元素？实现这个功能是可能的嗎？

示例代码：

<style>
  .Main-Div{
   display:none;
}
</style>

<div class="Main-Div">
    This is some Text..
    This is some Text..
    <div class="Inner-Div">
        <a href="#"><img src="/image/pic.jpg"></a>
    </div>
    This is some Text..
    This is some Text..
</div>

The Lösung:

Um dies zu erreichen, können Sie die folgende Technik anwenden:

1. Übergeordnetes Element verbergen:Stellen Sie die Sichtbarkeit des übergeordneten Elements auf „ „versteckt“ oder „einklappen“. Dadurch wird effektiv das gesamte übergeordnete Element, einschließlich aller seiner untergeordneten Elemente, ausgeblendet.
2. Untergeordnetes Element aufdecken: Als nächstes setzen Sie die Sichtbarkeit des untergeordneten Elements auf „sichtbar“. Dadurch wird der verborgene Zustand des übergeordneten Elements überschrieben und das spezifische untergeordnete Element angezeigt.

Geändertes Stylesheet:

.parent>.child
{
    visibility: visible;
}

.parent
{
  visibility: hidden;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

Vollständiges Beispiel:

Eine Live-Demonstration dieser Lösung finden Sie unter folgender URL: http://jsfiddle.net/pread13/h955D/153/

Zusätzlicher Hinweis:

Mit der Unterstützung von @n1kkou wurde die Lösung weiter verfeinert, um dies zu verhindern unnötige Platz- oder Randprobleme beim Verbergen des übergeordneten Elements.

Durch die Implementierung dieser Schritte können Sie untergeordnete Elemente effektiv innerhalb ausgeblendeter übergeordneter Elemente anzeigen. Bietet mehr Flexibilität für Ihre Webseitendesigns.

Das obige ist der detaillierte Inhalt vonWie zeige ich ein untergeordnetes Element an, wenn sein übergeordnetes Element ausgeblendet ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!