问题：
我试图让一把纯CSS手风琴工作
我用这个样本作为开头：
http://codepen.io/abergin/pen/ihlDf
这是我从样本中提取的html（我将复选框的不透明度更改为1，以更清楚地演示）：
<!DOCTYPE html>
<html class=''>
<head>
<title>Textbox-Test</title>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<style type="text/css" media="all">
.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);
-webkit-transform: translate(-50%, 0);
box-shadow: 0 10px 0 0 #ff6873 inset;
background-color: #fefffa;
max-width: 450px;
padding: 30px;
}
@media (max-width: 550px) {
body {
box-sizing: border-box;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
max-width: 100%;
min-height: 100%;
margin: 0;
left: 0;
}
}
h1, h2 {
color: #ff6873;
}
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);
-webkit-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);
-webkit-transform: translate(-6px, 0);
margin-top: 16px;
right: 0;
}
ul li i:before, ul li i:after {
content: "";
position: absolute;
background-color: #ff6873;
width: 3px;
height: 9px;
}
ul li i:before {
transform: translate(-2px, 0) rotate(45deg);
-webkit-transform: translate(-2px, 0) rotate(45deg);
}
ul li i:after {
transform: translate(2px, 0) rotate(-45deg);
-webkit-transform: translate(2px, 0) rotate(-45deg);
}
ul li input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 1;
}
ul li input[type=checkbox]:checked ~ p {
margin-top: 0;
max-height: 0;
opacity: 0;
transform: translate(0, 50%);
-webkit-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);
-webkit-transform: translate(-2px, 0) rotate(-45deg);
}
@keyframes flipdown {
0% {
opacity: 0;
transform-origin: top center;
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
}
5% {
opacity: 1;
}
80% {
transform: rotateX(8deg);
-webkit-transform: rotateX(8deg);
}
83% {
transform: rotateX(6deg);
-webkit-transform: rotateX(6deg);
}
92% {
transform: rotateX(-3deg);
-webkit-transform: rotateX(-3deg);
}
100% {
transform-origin: top center;
transform: rotateX(0deg);
-webkit-transform-origin: top center;
-webkit-transform: rotateX(0deg);
}
}
</style>
</head>
<body>
<h1>CSS + HTML only Accordion Element</h1>
<ul>
<li>
<input id="lol" type="checkbox" />
<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="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="checked" />
<i></i>
<h2>Points of Interest</h2>
<p>By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</p>
</li>
</ul>
<script type="text/javascript" >
function lolol()
{
document.getElementById("lol").click();
}
</script>
<input type="button" value="check" onclick="lolol();"/>
<!--
<script style='display: none;'>
var __links = document.querySelectorAll('a');
function __linkClick(e)
{
parent.window.postMessage(this.href, '*');
};
for (var i = 0, l = __links.length; i < l; i++)
{
if (__links[i].getAttribute('target') == '_blank')
{
__links[i].addEventListener('click', __linkClick, false);
}
}
</script>
-->
</body>
</html>
我想将它从复选框更改为单选按钮，以便在选择其他标题时其他菜单会崩溃。
所以这是将文本框更改为radiobutton之后的结果：
<!DOCTYPE html>
<html class=''>
<head>
<title>Radiobutton-Test</title>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<style type="text/css" media="all">
.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);
-webkit-transform: translate(-50%, 0);
box-shadow: 0 10px 0 0 #ff6873 inset;
background-color: #fefffa;
max-width: 450px;
padding: 30px;
}
@media (max-width: 550px) {
body {
box-sizing: border-box;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
max-width: 100%;
min-height: 100%;
margin: 0;
left: 0;
}
}
h1, h2 {
color: #ff6873;
}
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);
-webkit-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);
-webkit-transform: translate(-6px, 0);
margin-top: 16px;
right: 0;
}
ul li i:before, ul li i:after {
content: "";
position: absolute;
background-color: #ff6873;
width: 3px;
height: 9px;
}
ul li i:before {
transform: translate(-2px, 0) rotate(45deg);
-webkit-transform: translate(-2px, 0) rotate(45deg);
}
ul li i:after {
transform: translate(2px, 0) rotate(-45deg);
-webkit-transform: translate(2px, 0) rotate(-45deg);
}
ul li input[type=radio] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 1;
}
ul li input[type=radio]:checked ~ p {
margin-top: 0;
max-height: 0;
opacity: 0;
transform: translate(0, 50%);
-webkit-transform: translate(0, 50%);
}
ul li input[type=radio]:checked ~ i:before {
transform: translate(2px, 0) rotate(45deg);
}
ul li input[type=radio]:checked ~ i:after {
transform: translate(-2px, 0) rotate(-45deg);
-webkit-transform: translate(-2px, 0) rotate(-45deg);
}
@keyframes flipdown {
0% {
opacity: 0;
transform-origin: top center;
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
}
5% {
opacity: 1;
}
80% {
transform: rotateX(8deg);
-webkit-transform: rotateX(8deg);
}
83% {
transform: rotateX(6deg);
-webkit-transform: rotateX(6deg);
}
92% {
transform: rotateX(-3deg);
-webkit-transform: rotateX(-3deg);
}
100% {
transform-origin: top center;
transform: rotateX(0deg);
-webkit-transform-origin: top center;
-webkit-transform: rotateX(0deg);
}
}
</style>
</head>
<body>
<h1>CSS + HTML only Accordion Element</h1>
<ul>
<li>
<input id="lol" type="radio" name="accord" checked="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="radio" name="accord" />
<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 radio 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="radio" name="accord" />
<i></i>
<h2>Points of Interest</h2>
<p>By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</p>
</li>
</ul>
<!--
<script type="text/javascript">
function lolol() {
document.getElementById("lol").click();
}
</script>
<input type="button" value="check" onclick="lolol();" />
<script style='display: none;'>
var __links = document.querySelectorAll('a');
function __linkClick(e)
{
parent.window.postMessage(this.href, '*');
};
for (var i = 0, l = __links.length; i < l; i++)
{
if (__links[i].getAttribute('target') == '_blank')
{
__links[i].addEventListener('click', __linkClick, false);
}
}
</script>
-->
</body>
</html>
有趣的是，当使用单选按钮而不是复选框时，检查的CSS属性似乎完全相反。
为什么？
有没有一种简单的方法来解决它？
修改
唉，我明白为什么，它实际上表现得一样。
新问题：如何反转这一点，如
ul li input[type=checkbox]:unchecked ~ p {
而不是
ul li input[type=checkbox]:checked ~ p {
答案 0 :(得分：0)
哦，很酷，：没有（：已检查）有效;）
谢谢@Niet the Dark Absol
修改
更正：适用于所有浏览器（使用Chrome和Firefox进行测试，最新稳定版本，除了IE）（使用IE 11测试，最新公开发布的版本）。
IE在那里有渲染问题。
单击后放大，并正确地重绘。 BUG。
<!DOCTYPE html>
<html class=''>
<head>
<title>Radiobutton-Test</title>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<style type="text/css" media="all">
.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);
-webkit-transform: translate(-50%, 0);
box-shadow: 0 10px 0 0 #ff6873 inset;
background-color: #fefffa;
max-width: 450px;
padding: 30px;
}
@media (max-width: 550px) {
body {
box-sizing: border-box;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
max-width: 100%;
min-height: 100%;
margin: 0;
left: 0;
}
}
h1, h2 {
color: #ff6873;
}
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);
-webkit-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);
-webkit-transform: translate(-6px, 0);
margin-top: 16px;
right: 0;
}
ul li i:before, ul li i:after {
content: "";
position: absolute;
background-color: #ff6873;
width: 3px;
height: 9px;
}
ul li i:before {
transform: translate(-2px, 0) rotate(45deg);
-webkit-transform: translate(-2px, 0) rotate(45deg);
}
ul li i:after {
transform: translate(2px, 0) rotate(-45deg);
-webkit-transform: translate(2px, 0) rotate(-45deg);
}
ul li input[type=radio] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 1;
}
ul li input[type=radio]:not(:checked) ~ p {
margin-top: 0;
max-height: 0;
opacity: 0;
transform: translate(0, 50%);
-webkit-transform: translate(0, 50%);
}
ul li input[type=radio]:not(:checked) ~ i:before {
transform: translate(2px, 0) rotate(45deg);
}
ul li input[type=radio]:not(:checked) ~ i:after {
transform: translate(-2px, 0) rotate(-45deg);
-webkit-transform: translate(-2px, 0) rotate(-45deg);
}
@keyframes flipdown {
0% {
opacity: 0;
transform-origin: top center;
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
}
5% {
opacity: 1;
}
80% {
transform: rotateX(8deg);
-webkit-transform: rotateX(8deg);
}
83% {
transform: rotateX(6deg);
-webkit-transform: rotateX(6deg);
}
92% {
transform: rotateX(-3deg);
-webkit-transform: rotateX(-3deg);
}
100% {
transform-origin: top center;
transform: rotateX(0deg);
-webkit-transform-origin: top center;
-webkit-transform: rotateX(0deg);
}
}
</style>
</head>
<body>
<h1>CSS + HTML only Accordion Element</h1>
<ul>
<li>
<input id="lol" type="radio" name="accord" checked="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="radio" name="accord" />
<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 radio 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="radio" name="accord" />
<i></i>
<h2>Points of Interest</h2>
<p>By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</p>
</li>
</ul>
<!--
<script type="text/javascript">
function lolol() {
document.getElementById("lol").click();
}
</script>
<input type="button" value="check" onclick="lolol();" />
<script style='display: none;'>
var __links = document.querySelectorAll('a');
function __linkClick(e)
{
parent.window.postMessage(this.href, '*');
};
for (var i = 0, l = __links.length; i < l; i++)
{
if (__links[i].getAttribute('target') == '_blank')
{
__links[i].addEventListener('click', __linkClick, false);
}
}
</script>
-->
</body>
</html>