Ini adalah demo yang asalnya oleh Martin Ivanov, menggunakan kotak centang tersembunyi dan penggabungan saudara yang berdekatan untuk menetapkan "keadaan" setiap folder. Demo langsung telah tersekat dari internet, jadi saya akan menghantar salinannya di sini, dengan kod asal di bawahnya.
Lihat Folder Pen Nested, No JS oleh Chris Coyier (@chriscoyier) di 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