现在已经很晚了，我突然想到了这一点。我正在构建一个显示本地计算机内容的页面。我的结构与Pedro Nauck在codepen上的笔完全相同。 （http://codepen.io/pedronauck/pen/jaluz）
在我的第三个也是最后一个列表项中，我构建了一个更深层的结构，每个列表项都有另一个列表，我试图在这里添加一个子目录结构。一切正常，行为：子目录结构不会扩展，它与列表项本身保持相同的高度，并且可以滚动。
在下面的代码中，您可能会发现一些奇怪的事情，因为我已经进行了很多实验！ ：）
PS：包含完整内容的页面很大，但我在一个简单的index.html中尝试了下面的代码，它显示了我的意思，你得到一个标题，当你点击它时，目录推出，与标题具有完全相同的样式。 （令人困惑，我知道。）但是当你点击目录它变得可滚动时你就可以滚动子目录了。我不希望它可滚动（溢出：隐藏），但希望它能够扩展，就像导演一样。
我现在上床睡觉了！希望有一些见解......
代码：
<head> <title>Local</title> <style>
.sites-dropdown {
position: relative;
}
.sites-dropdown a {
text-decoration: none;
height: 25px;
text-transform: uppercase;
color: #C8C8C8;
font-size: 0.75em;
letter-spacing: 0.3em;
}
.sites-dropdown [data-toggle="sites-dropdown"] {
display: block;
color: white;
background: #646464;
padding: 10px;
height: 25px;
}
.sites-dropdown [data-toggle="sites-dropdown"]:hover {
background: #646464;
color: #06ffb5;
}
.sites-dropdown [data-toggle="sites-dropdown"]:before {
position: absolute;
display: block;
content: '\25BC';
font-size: 0.7em;
color: #fff;
top: 13px;
right: 10px;
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.sites-dropdown > .dropdown-sites {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
-webkit-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
}
.sites-dropdown > .dropdown-sites li {
padding: 0;
}
.sites-dropdown > input[type="checkbox"] {
opacity: 0;
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.sites-dropdown > input[type="checkbox"]:checked ~ .dropdown-sites {
max-height: 9999px;
display: block;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
-webkit-animation: showAnimation 0.5s ease-in-out;
-moz-transition: max-height 2s ease-in-out;
-o-transition: max-height 2s ease-in-out;
-webkit-transition: max-height 2s ease-in-out;
transition: max-height 2s ease-in-out;
}
.sites-dropdown > input[type="checkbox"]:checked + a[data-toggle="sites-dropdown"]:before {
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
li {
font-size: 1rem;
line-height: 1.8rem;
font-family: helvetica, arial, sans-serif;
}
li a {
text-decoration: none;
color: #444;
}
.sites-item {
margin-top: 40px;
}
.arrow {
color: #C8C8C8;
width: 3%;
float: left;
text-align: left;
}
.sites {
text-align: left;
}
.sitename {
float: left;
text-align: left;
min-width: 42%; // initially, width:42%
}
.sitelmd {
font-size: 0.6rem;
color: #C8C8C8;
float: left;
text-align: left;
min-width: 23%; // initially, width:23%
}
.sitesize {
color: #C8C8C8;
float: left;
min-width: 16%; // initially, width:16%;
text-align: right;
}
.siteadmin {
color: #C8C8C8;
float: right;
min-width: 5%; // initially, width:5%;
text-align: right;
}
.siteadmin:hover {
color: #06ffb5;
}
.sites li {
width: 100%;
height: 2rem;
position: relative;
float: left;
overflow: auto;
margin: 0;
-webkit-transition: background 2s ease;
-moz-transition: background 2s ease;
-ms-transition: background 2s ease;
-o-transition: background 2s ease;
transition: background 2s ease;
}
.sites li:nth-child(even) {
background: #fff;
}
.sites li:nth-child(odd) {
background: #fff;
}
.sites li:nth-child(even):hover {
-webkit-transition: background 0.2s ease;
-moz-transition: background 0.2s ease;
-o-transition: background 0.2s ease;
transition: background 0.2s ease;
background: #06ffb5;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, rgba(0, 255, 255, 0.1), rgba(0, 255, 181, 0.1));
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, rgba(0, 255, 255, 0.1), rgba(0, 255, 181, 0.1));
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, rgba(0, 255, 255, 0.1), rgba(0, 255, 181, 0.1));
/* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, rgba(0, 255, 255, 0.1), rgba(0, 255, 181, 0.1));
/* Standard syntax */
}
.sites li:nth-child(odd):hover {
-webkit-transition: background 0.2s ease;
-moz-transition: background 0.2s ease;
-o-transition: background 0.2s ease;
transition: background 0.2s ease;
background: -webkit-linear-gradient(left top, rgba(0, 255, 181, 0.1), rgba(0, 255, 255, 0.1));
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, rgba(0, 255, 181, 0.1), rgba(0, 255, 255, 0.1));
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, rgba(0, 255, 181, 0.1), rgba(0, 255, 255, 0.1));
/* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, rgba(0, 255, 181, 0.1), rgba(0, 255, 255, 0.1));
/* Standard syntax */
}
.sites li:hover .no-img2 {
background-color: #2dc878;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.sites li:hover .arrow {
color: #06ffb5;
}
.filename {
width: 33%;
float: left;
text-align: center;
color: #C8C8C8;
}
.datelastmodified {
float: left;
text-align: center;
min-width: 33%; // initially, width:33%
text-align: center;
color: #C8C8C8;
}
.filesize {
position: relative;
float: left;
text-align: center;
width: 33%;
color: #C8C8C8;
}
.icon2,
.sites img {
float: top;
font-size: .7rem;
display: inline-block;
text-indent: -10000px;
background-size: 1.2rem;
background-repeat: no-repeat;
background-position: center center;
height: 2rem;
width: 2rem;
display: none;
}
.sites img,
.sites .no-img2 {
float: left;
height: 2rem;
width: 2rem;
background-color: #EEE;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
.sites .no-img2 {
background-color: #999;
}
.subsites-dropdown {
position: relative;
}
.subsites-dropdown a {
text-decoration: none;
height: 25px;
text-transform: uppercase;
color: #C8C8C8;
font-size: 0.75em;
letter-spacing: 0.3em;
}
.subsites-dropdown [data-toggle="subsites-dropdown"] {
display: block;
color: white;
background: #646464;
padding: 10px;
height: 25px;
}
.subsites-dropdown [data-toggle="subsites-dropdown"]:hover {
background: #646464;
color: #06ffb5;
}
.subsites-dropdown [data-toggle="subsites-dropdown"]:before {
position: absolute;
display: block;
content: '\25BC';
font-size: 0.7em;
color: #fff;
top: 13px;
right: 10px;
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.subsites-dropdown > .dropdown-subsites {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
-webkit-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
}
.subsites-dropdown > .dropdown-subsites li {
padding: 0;
}
.subsites-dropdown > input[type="checkbox"] {
opacity: 0;
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.subsites-dropdown > input[type="checkbox"]:checked ~ .dropdown-subsites {
max-height: 9999px;
display: block;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
-webkit-animation: showAnimation 0.5s ease-in-out;
-moz-transition: max-height 2s ease-in-out;
-o-transition: max-height 2s ease-in-out;
-webkit-transition: max-height 2s ease-in-out;
transition: max-height 2s ease-in-out;
}
.subsites-dropdown > input[type="checkbox"]:checked + a[data-toggle="subsites-dropdown"]:before {
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
li {
font-size: 1rem;
line-height: 1.8rem;
font-family: helvetica, arial, sans-serif;
}
li a {
text-decoration: none;
color: #444;
}
.subsites-item {
margin-top: 40px;
}
.arrow {
color: #C8C8C8;
width: 3%;
float: left;
text-align: left;
}
.subsites {
text-align: left;
}
.sitename {
float: left;
text-align: left;
min-width: 42%; // initially, width:42%
}
.sitelmd {
font-size: 0.6rem;
color: #C8C8C8;
float: left;
text-align: left;
min-width: 23%; // initially, width:23%
}
.subsitesize {
color: #C8C8C8;
float: left;
min-width: 16%; // initially, width:16%;
text-align: right;
}
.siteadmin {
color: #C8C8C8;
float: right;
min-width: 5%; // initially, width:5%;
text-align: right;
}
.siteadmin:hover {
color: #06ffb5;
}
.subsites li {
width: 100%;
height: 2rem;
position: relative;
float: left;
overflow: auto;
margin: 0;
-webkit-transition: background 2s ease;
-moz-transition: background 2s ease;
-ms-transition: background 2s ease;
-o-transition: background 2s ease;
transition: background 2s ease;
}
.subsites li:nth-child(even) {
background: #fff;
}
.subsites li:nth-child(odd) {
background: #fff;
}
.subsites li:nth-child(even):hover {
-webkit-transition: background 0.2s ease;
-moz-transition: background 0.2s ease;
-o-transition: background 0.2s ease;
transition: background 0.2s ease;
background: #06ffb5;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, rgba(0, 255, 255, 0.1), rgba(0, 255, 181, 0.1));
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, rgba(0, 255, 255, 0.1), rgba(0, 255, 181, 0.1));
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, rgba(0, 255, 255, 0.1), rgba(0, 255, 181, 0.1));
/* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, rgba(0, 255, 255, 0.1), rgba(0, 255, 181, 0.1));
/* Standard syntax */
}
.subsites li:nth-child(odd):hover {
-webkit-transition: background 0.2s ease;
-moz-transition: background 0.2s ease;
-o-transition: background 0.2s ease;
transition: background 0.2s ease;
background: -webkit-linear-gradient(left top, rgba(0, 255, 181, 0.1), rgba(0, 255, 255, 0.1));
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, rgba(0, 255, 181, 0.1), rgba(0, 255, 255, 0.1));
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, rgba(0, 255, 181, 0.1), rgba(0, 255, 255, 0.1));
/* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, rgba(0, 255, 181, 0.1), rgba(0, 255, 255, 0.1));
/* Standard syntax */
}
.subsites li:hover .no-img2 {
background-color: #2dc878;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.subsites li:hover .arrow {
color: #06ffb5;
}
.filename {
width: 33%;
float: left;
text-align: center;
color: #C8C8C8;
}
.datelastmodified {
float: left;
text-align: center;
min-width: 33%; // initially, width:33%
text-align: center;
color: #C8C8C8;
}
.filesize {
position: relative;
float: left;
text-align: center;
width: 33%;
color: #C8C8C8;
}
.icon2,
.subsites img {
float: top;
font-size: .7rem;
display: inline-block;
text-indent: -10000px;
background-size: 1.2rem;
background-repeat: no-repeat;
background-position: center center;
height: 2rem;
width: 2rem;
display: none;
}
.subsites img,
.subsites .no-img2 {
float: left;
height: 2rem;
width: 2rem;
background-color: #EEE;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
.sites .no-img2 {
background-color: #999;
} </style> </head>
<body id="grad"> </body> <ul> <li class="sites-dropdown">
<!-- Compared to the last item of this list, the structure is about the same, although it has one <ul> less. --> </li> <li class="sites-dropdown">
<!-- Compared to the last item of this list, the structure is about the same, although it has one <ul> less. --> </li> <li class="sites-dropdown">
<input type="checkbox" />
<a href="#" class="sites-header-top" data-toggle="sites-dropdown">
<span class="filename">Templates</span>
<span class="datelastmodified">Last modified</span>
<span class="filesize">Size</span>
</a>
<ul class="dropdown-sites sites">
<li class="subsites-dropdown subdir-sites-dropdown">
<input type="checkbox" />
<a href="#" class="subsites-header-top" data-toggle="subsites-dropdown">
<span class="filename">animation</span>
<span class="datelastmodified">Last modified</span>
<span class="filesize">Size</span>
</a>
<ul class="dropdown-subsites subsites">
<!-- This <ul> is styled exactly the same as as the others, exept for experimenting I changend all the "sites"-classes to "subsites"-classes, without any succes for now. -->
<li class="subsites-item">
<a class="subfolder subsite" href="http://animation-1.template" target="_blank">
<span class="arrow">▶ </span>
<span class="sitename">animation-1</span>
</a>
<span class="sitelmd">Sun, 13 Dec 2015 12:05:55 +0100</span>
<span class="sitesize">30.6 Mb</span>
</li>
<li class="subsites-item">
<a class="subfolder subsite" href="http://animation-2.template" target="_blank">
<span class="arrow">▶ </span>
<span class="sitename">animation-2</span>
</a>
<span class="sitelmd">Sun, 13 Dec 2015 12:08:16 +0100</span>
<span class="sitesize">34 Mb</span>
</li>
</ul>
</li>
</ul> </li> </ul> </body>