Thư mục lồng nhau & có thể mở rộng - Thủ thuật CSS

Đây là bản demo ban đầu của Martin Ivanov, sử dụng các hộp kiểm ẩn và các tổ hợp anh chị em liền kề để thiết lập “trạng thái” của mỗi thư mục. Bản demo trực tiếp đã không có trên Internet, vì vậy tôi sẽ đăng một bản sao của nó ở đây, với mã gốc bên dưới nó.

Xem Pen Nested Folders, No JS của Chris Coyier (@chriscoyier) trên CodePen.

.css-treeview ul, .css-treeview li ( padding: 0; margin: 0; list-style: none; ) .css-treeview input ( position: absolute; opacity: 0; ) .css-treeview ( font: normal 11px "Segoe UI", Arial, Sans-serif; -moz-user-select: none; -webkit-user-select: none; user-select: none; ) .css-treeview a ( color: #00f; text-decoration: none; ) .css-treeview a:hover ( text-decoration: underline; ) .css-treeview input + label + ul ( margin: 0 0 0 22px; ) .css-treeview input + label + ul ( display: none; ) .css-treeview label, .css-treeview label::before ( cursor: pointer; ) .css-treeview input:disabled + label ( cursor: default; opacity: .6; ) .css-treeview input:checked:not(:disabled) + label + ul ( display: block; ) .css-treeview label, .css-treeview label::before ( background: url("icons.png.webp") no-repeat; ) .css-treeview label, .css-treeview a, .css-treeview label::before ( display: inline-block; height: 16px; line-height: 16px;, vertical-align: middle; ) .css-treeview label ( background-position: 18px 0; ) .css-treeview label::before ( content: ""; width: 16px; margin: 0 22px 0 0; vertical-align: middle; background-position: 0 -32px; ) .css-treeview input:checked + label::before ( background-position: 0 -16px; ) /* webkit adjacent element selector bugfix */ @media screen and (-webkit-min-device-pixel-ratio:0) ( .css-treeview ( -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s; ) @-webkit-keyframes webkit-adjacent-element-selector-bugfix ( from ( padding: 0; ) to ( padding: 0; ) ) )

This Folder is Closed By Default

Ooops! A Nested Folder

Look Ma - No Hands!

First Nested Item
Second Nested Item
Third Nested Item
Fourth Nested Item


Item 1
Item 2
Item 3


Yet Another One

item
item
item
item
item
item
item
item


Disabled Nested Items

item
item
item
item
item
item
item
item


item
item
item
item


This One is Open by Default…

And Contains More Nested Items…

Look Ma - No Hands
Another Item
And Yet Another


Lorem
Ipsum
Dolor
Sit Amet


Can You Believe…

That This Treeview…

Does Not Use Any JavaScript…

But Relies Only
On the Power
Of CSS3


Item 1
Item 2
Item 3


This is a Folder With…

Some Nested Items…
Some Nested Items…
Some Nested Items…
Some Nested Items…
Some Nested Items…


Disabled Nested Items

item
item
item
item
item
item
item
item