Erfahren Sie, wie Sie mit reinem CSS ein zusammenklappbares Baummenü erstellen

Mit der Veröffentlichung von CSS3 ist die ausländische Forschung in vollem Gange, aber es gibt immer noch viele Menschen in China, die der Meinung sind, dass IE CSS3 nicht unterstützt, und die gleichgültig bleiben und sich weigern, etwas zu lernen. Aber die Geschichte lehrt uns, dass sich die guten Dinge durchsetzen werden und dass CSS3 irgendwann CSS2 ersetzen wird. Lassen Sie uns ein mit CSS3 erstelltes zusammenklappbares Baummenü mit Ihnen teilen.

Ich glaube, jeder kennt das Baummenü. Wir verwenden normalerweise CSS JS, um es zu implementieren. Die Einführung von CSS3 ermöglicht es uns, die Einschränkungen von JS zu beseitigen und den „Selektor“ von CSS3 direkt zu verwenden, um ein zusammenklappbares Baummenü zu realisieren.

Es gibt viel Gesamtcode, daher werde ich nicht Satz für Satz darauf eingehen, sondern nur das erwähnen, was ich für wichtig halte.

Html-Code:

<li>
<label for="subsubfolder1">下级</label>
<input id="subsubfolder1" type="checkbox" />
<ol>
<li class="file"><a>下级</a></li>
<li>
<label for="subsubfolder2">下级</label>
<input id="subsubfolder2" type="checkbox" />
<ol>
<li class="file"><a>无限级</a></li>
<li class="file"><a>无限级</a></li>
<li class="file"><a>无限级</a></li>
<li class="file"><a>无限级</a></li>
<li class="file"><a>无限级</a></li>
<li class="file"><a>无限级</a></li>
</ol>
</li>
</ol>
</li>

Die Implementierungsidee besteht darin, den aktivierten Wert des Kontrollkästchens zu verwenden, um zu bestimmen, ob die untergeordnete Spalte erweitert ist. Der CSS3-Selektor bietet Folgendes: Geprüfte Pseudoklasse. Diese Pseudoklasse ermöglicht uns die Ausführung Ihres CSS, wenn das Element den geprüften Wert hat. (Sehr leistungsfähig, oder? Mit CSS3 werden wir viel weniger JS schreiben!)

Herunterladen


Wenn das Kontrollkästchen einen aktivierten Wert hat Zu diesem Zeitpunkt werden wir OL in die Realität umsetzen und die gewünschten Funktionen erreichen.

Sehen wir uns als nächstes den CSS-Code an:

li input {
position:absolute;left:0;margin-left:0;opacity:0;z-index:2;cursor:pointer;height:1em;width:1em;top:0;
}
input + ol {
display:none;
}
input + ol > li { 
height:0;overflow:hidden;margin-left:-14px!important;padding-left:1px; 
}
li label {
cursor:pointer;display:block;padding-left:17px;background:url(toggle-small-expand.png) no-repeat 0px 1px;
}
input:checked + ol {
background:url(toggle-small.png) 44px 5px no-repeat;margin:-22px 0 0 -44px;padding:27px 0 0 80px;height:auto;display:block;
}
input:checked + ol > li {
height:auto;
}

Dieser Code ist die Mitte des Baummenüs:

input:checked ol {
Hintergrund: url(toggle-small.png) 44px 5px no-repeat;margin: -22px 0 0 -44px;padding:27px 0 0 80px;height: auto;display: block;
}

Hier geht es um den Stil, der dem entsprechenden OL gehört, nachdem inoput dies überprüft hat.

Sie müssen es nicht lesen, wenn Sie IE9 oder niedriger verwenden. Bitte verwenden Sie einen Nicht-IE-Browser.

(Es ist auch möglich, dafür zu sorgen, dass der IE6-Browser es unterstützt, aber Sie müssen JS hinzufügen, um CSS3-Attribute zu simulieren. Es gibt viele talentierte Leute im Ausland, die JS geschrieben haben, damit der IE6-Browser einige CSS3 unterstützt, wie z als PIE.)

Zusammenfassung:

Im Allgemeinen ist die Implementierungsidee sehr einfach und verwendet hauptsächlich die überprüfte Pseudoklasse von CSS3, um die versteckte Anzeige von OL zu realisieren. Leider unterstützt der IE-Browser CSS3 nicht, aber wir können die Forschung zu CSS3 nicht aufgeben, da der IE es nicht unterstützt. CSS3 und HTML5 sind im Ausland beide sehr heiße Themen im Front-End. Ihre Forschung übertrifft unsere bei weitem, aber es gibt immer noch nicht viele Leute, die es tatsächlich in China ausprobiert haben, was für einen Front-End-Entwickler eine sehr traurige Sache ist. Ich denke, CSS3 sollte unsere Aufmerksamkeit erregen und uns nicht gleich am Anfang verlieren lassen. Lassen Sie uns alle zusammenarbeiten, um die Entwicklung von CSS3 voranzutreiben.