我试图制作this pure CSS accordion。
为什么它不起作用？我需要更改什么才能使其正常工作？
我试过了：
不带CSS的HTML：
<h1>CSS + HTML only Accordion Element</h1>
<ul>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Languages Used</h2>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.</p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>How it Works</h2>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Points of Interest</h2>
<p>
<ul>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Languages Used</h2>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.</p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>How it Works</h2>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Points of Interest</h2>
<p></p>
</li>
</ul>
</p>
</li>
</ul>
使用CSS的HTML：
<head>
<meta charset="utf-8">
<title>
</title>
<link rel="stylesheet" href="interlocuteurs/css/layout_1_column.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Titillium+Web:300,700,300italic'>
<style>
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
.transition, p, ul li i:before, ul li i:after {
transition: all 0.25s ease-in-out;
}
.flipIn, h1, ul li {
animation: flipdown 0.5s ease both;
}
.no-select, h2 {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html {
width: 100%;
height: 100%;
perspective: 900;
overflow-y: scroll;
background-color: #dce7eb;
font-family: "Titillium Web", sans-serif;
color: rgba(48, 69, 92, 0.8);
}
body {
min-height: 0;
display: inline-block;
position: relative;
left: 50%;
margin: 90px 0;
transform: translate(-50%, 0);
box-shadow: 0 10px 0 0 #008ae6 inset;
background-color: #fefffa;
max-width: 80%;
padding: 30px;
}
@media (max-width: 550px) {
body {
box-sizing: border-box;
transform: translate(0, 0);
max-width: 100%;
min-height: 100%;
margin: 0;
left: 0;
}
}
h1, h2 {
color: #008ae6;
}
h1 {
text-transform: uppercase;
font-size: 36px;
line-height: 42px;
letter-spacing: 3px;
font-weight: 100;
}
h2 {
font-size: 26px;
line-height: 34px;
font-weight: 300;
letter-spacing: 1px;
display: block;
background-color: #fefffa;
margin: 0;
cursor: pointer;
}
p {
color: rgba(48, 69, 92, 0.8);
font-size: 17px;
line-height: 26px;
letter-spacing: 1px;
position: relative;
overflow: hidden;
max-height: 800px;
opacity: 1;
transform: translate(0, 0);
margin-top: 14px;
z-index: 2;
}
ul {
list-style: none;
perspective: 900;
padding: 0;
margin: 0;
}
ul li {
position: relative;
padding: 0;
margin: 0;
padding-bottom: 4px;
padding-top: 18px;
border-top: 1px dotted #dce7eb;
}
ul li:nth-of-type(1) {
animation-delay: 0.5s;
}
ul li:nth-of-type(2) {
animation-delay: 0.75s;
}
ul li:nth-of-type(3) {
animation-delay: 1s;
}
ul li:last-of-type {
padding-bottom: 0;
}
ul li i {
position: absolute;
transform: translate(-6px, 0);
margin-top: 16px;
right: 0;
}
ul li i:before, ul li i:after {
content: "";
position: absolute;
background-color: #008ae6;
width: 3px;
height: 9px;
}
ul li i:before {
transform: translate(-2px, 0) rotate(45deg);
}
ul li i:after {
transform: translate(2px, 0) rotate(-45deg);
}
ul li input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
}
ul li input[type=checkbox]:checked ~ p {
margin-top: 0;
max-height: 0;
opacity: 0;
transform: translate(0, 50%);
}
ul li input[type=checkbox]:checked ~ i:before {
transform: translate(2px, 0) rotate(45deg);
}
ul li input[type=checkbox]:checked ~ i:after {
transform: translate(-2px, 0) rotate(-45deg);
}
@keyframes flipdown {
0% {
opacity: 0;
transform-origin: top center;
transform: rotateX(-90deg);
}
5% {
opacity: 1;
}
80% {
transform: rotateX(8deg);
}
83% {
transform: rotateX(6deg);
}
92% {
transform: rotateX(-3deg);
}
100% {
transform-origin: top center;
transform: rotateX(0deg);
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
答案 0 :(得分：1)
这是一个updated codepen，可以使用以下更新的CSS和标记，其中诀窍是仅针对每个输入的第一个div（也为p交换div一个有效的子结构）
我所做的是为每个级别添加一个类（ lev1 / lev2），同时应用于input和div它可能在当时显示/隐藏一个级别，然后在CSS
经过一番思考后，我发现每个级别的课程都没有必要，所以我简化了它
CSS
input[type=checkbox]
position: absolute
cursor: pointer
width: 100%
height: 100%
z-index: 1
opacity: 0
&:checked
&~div
margin-top: 0
max-height: 0
opacity: 0
transform: translate( 0 , 50% )
HTML
<li>
<input type="checkbox" checked>
<i></i>
<h2>Points of Interest</h2>
<div>
<ul>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Sub 1 Points of Interest</h2>
<div>....</div>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Sub 2 Points of Interest</h2>
<div>....</div>
</li>
</ul>
</div>
</li>
答案 1 :(得分：0)
删除那个奇怪的ul标签，然后写
<p>Lorem ipsum dolor</p>
，根本就不应该这样。
只需删除它并保留原始codepen示例中的HTML标记。 并且你的笔将完美地工作（加载动画除外，因为你并没有为所有李子设置，只有3个）。