纯CSS手风琴问题 [英] Pure CSS Accordion Issue
本文介绍了纯CSS手风琴问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在玩纯CSS手风琴 http://reversl.net/accordion/ 可以使基本功能正常工作(标题2和3都切换),但是如果我添加相同的UL,则标题1不能切换。由于标题1的样式不同,因此(我认为)问题在于命名/定位为+ div吗?
I'm playing around with a pure CSS accordion http://reversl.net/accordion/ I can get the basic functionality to work (headings 2 & 3 both toggle) But I can't get heading 1 to toggle if I add the same UL to it. Because Heading 1 is styled differently the problem (I think) lies within naming/targeting it's + div ?
请注意:我从标题1中删除了UL出于演示目的,因为它阻止了Headings 2&
推荐答案
您犯了几个错误。太多了:
You made several mistakes. Too many to count:
这里是一个有效的示例:尝试看看我所做的更改
http://jsfiddle.net/HerrSerker/ASqE9/
Here is a working example: Try and see, what I changed
http://jsfiddle.net/HerrSerker/ASqE9/
<div id="wrap">
<div class="accordion">
<div id="two" class="section">
<h4>
<a href="#two">Heading 2</a>
</h4>
<div class="sub_section">
<ul class="list">
<li>Sample Text 1</li>
<li class="last">Sample Text 2</li>
</ul>
</div>
</div><!--#two-->
<div id="four" class="section progress">
<h4>
<a href="#four">Heading 4 (With Progress Bar)</a>
</h4>
<div class="metrics">
<div class="meter">
<span style="width: 75%"></span>
</div><!--.meter-->
</div><!--.metrics-->
<div class="sub_section">
<ul class="list">
<li>Sample Text 1</li>
<li class="last">Sample Text 2</li>
</ul>
</div><!--.sub_section-->
</div><!--#one-->
</div><!--accordian-->
</div>
CSS
CSS
#wrap {
width: 320px;
background: #f0f0f0;
margin: auto;
}
.accordion {
clear: both;
padding: 0;
margin: 0 auto;
}
.accordion h4 {
margin: 0;
}
.accordion h4 a {
padding: 1em;
color: #999;
display: block;
font-weight: normal;
text-decoration: none;
}
.accordion h4 a:hover {
text-decoration: none;
background: #111;
}
.accordion .section {
background: #222;
border-bottom: 1px solid #000;
}
.accordion .sub_section {
border-bottom: none;
background: #f0f0f0;
}
.list {
padding: 0;
margin: 0;
}
.list li {
background: url('http://www.placehold.it/40x40') no-repeat;
color: #999;
list-style: none;
padding: .7em .7em .7em 4em;
border-bottom: 1px solid #fff;
}
.list .last {
border-bottom: none;
}
.accordion .sub_section {
height: 0;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
}
.accordion :target h4 a {
text-decoration: none;
font-weight: bold;
}
.accordion :target .sub_section {
height: 80px;
}
.accordion .section.large:target h4 + div {
overflow: auto;
}
.accordion p {
color: #646464;
}
.accordion .progress .meter {
width: 90%;
height: 2px;
position: relative;
background: #555;
margin: -.9em auto .5em auto;
padding: 1px;
}
.meter > span {
height: 2px;
display: block;
background-color: #f0f0f0;
position: relative;
overflow: hidden;
}
这篇关于纯CSS手风琴问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文