当 .content [type=checkbox]:选中时,我需要一个否定伪类来折叠扩展的内容。怎么说折叠除单击之外的所有列表?没有javascript可能吗?
.HTML:
<div class="accordion vertical">
<ul>
<li>
<input type="checkbox" id="checkbox-1" name="checkbox-accordion" />
<label for="checkbox-1">Title One</label>
<div class="content">
<h3></h3>
<p></p>
</div>
</li>
<li>
<input type="checkbox" id="checkbox-2" name="checkbox-accordion" />
<label for="checkbox-2">Title Two</label>
<div class="content">
<h3></h3>
<p></p>
</div>
</li>
<li>
<input type="checkbox" id="checkbox-3" name="checkbox-accordion" />
<label for="checkbox-3">Title Three</label>
<div class="content">
<h3></h3>
<p></p>
</div>
</li>
<li>
<input type="checkbox" id="checkbox-4" name="checkbox-accordion" />
<label for="checkbox-4">Title Four</label>
<div class="content">
<h3></h3>
<p></p>
</div>
</li>
</ul>
</div>
.CSS:
.accordion {
font-family:Arial, Helvetica, sans-serif;
margin:0 auto;
font-size:14px;
border:1px solid #542437;
border-radius:10px;
width:600px;
padding:10px;
background:#fff;
}
.accordion ul {
list-style:none;
margin:0;
padding:0;
}
.accordion li {
margin:0;
padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
display:none;
}
.accordion label {
display:block;
font-size:16px;
line-height:16px;
background:#D95B43;
border:1px solid #542437;
color:#542437;
text-shadow:1px 1px 1px rgba(255,255,255,0.3);
font-weight:700;
cursor:pointer;
text-transform:uppercase;
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {
background:#C02942;
color:#FFF;
text-shadow:1px 1px 1px rgba(0,0,0,0.5)
}
.accordion .content {
padding:0 10px;
overflow:hidden;
border:1px solid #fff;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
}
.accordion p {
color:#333;
margin:0 0 10px;
}
.accordion h3 {
color:#542437;
padding:0;
margin:10px 0;
}
.vertical ul li {
overflow:hidden;
margin:0 0 1px;
}
.vertical ul li label {
padding:10px;
}
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {
border-bottom:0;
}
.vertical ul li label:hover {
border:1px solid #542437;
}
.vertical ul li .content {
height:0px;
border-top:0;
transition: all .5s ease-out;
}
.vertical [type=checkbox]:checked ~ label ~ .content {
height:300px;
border:1px solid #542437;
}
http://jsfiddle.net/Yn4LS/
答案其实很简单,很容易实现,看这个JSFiddle
我所做的只是将(在您的 HTML 中)"复选框"一词替换为"radio",然后对 CSS 进行了一个小编辑:
这是CSS中的最后一项,这需要是"单选",而不是"复选框"
.vertical [type=radio]:checked ~ label ~ .content {
height:300px;
border:1px solid #542437;
}