0
내가 HTML과 CSS를 사용하여 아코디언을 만들려고 해요 스타일링,하지만 몇 가지 문제로 실행했습니다HTML의 CSS - 아코디언
데모 : http://jsfiddle.net/MMFBz/
문제 1 - 각 라벨 첫 번째 것을 제외하고는 1px dashed #C5B7A6 경계선이 있어야합니다. 내가 :first-of-type 또는 :first-child의 의사 요소를 만들 때 그것은 ...
- 이유는 첫째 테두리 자체를 아무것도 제거하지 않습니다 실 거예요?
문제 2 - 레이블을 확인/열어 본 후에는 제목 색이 #EF7C4D이어야합니다.
- 일단 라벨을 열거 나 확인하면 색상을 변경하고 다시 닫으면 흰색으로 돌아갑니다.
문제 3 - 열 내가 0으로 설정하면 잘 작동이 1로 설정되어 있지만 한 번 열어 다시 텍스트를 페이딩 작동하지 않을 때 각 문서의 텍스트는 다음에, opacity: 0해야 .
- 이것은 어떻게 가능합니까?
문제 4 - 각 기사의 내용량에 따라 자동으로 설정되는 height이 있어야합니다. height: 150px;을 제거하면 전환 효과가 느슨해집니다 (점차 아래로 내려서 열림).
- 동일한 효과로 고정 높이를 사용하지 않는 방법에 대한 아이디어가 있으십니까?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Accordion with CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" checked />
<label for="ac-1">Label One</label>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius arcu lectus, sit amet tempus nibh. Integer quis eros sed dui varius luctus in non ipsum. Proin congue, nibh nec rhoncus fermentum, ipsum magna imperdiet libero, id viverra lorem nisi ac ante. Integer eu tortor ac nunc pulvinar fermentum vel vulputate enim. Curabitur id diam urna. Vestibulum venenatis malesuada mauris, rhoncus ullamcorper tortor dictum vel. Fusce luctus metus id felis ultricies lacinia. Praesent luctus varius augue, id consectetur eros iaculis sit amet. Fusce tempor dolor ut leo tempus sit amet ornare eros cursus. Nulla dui dolor, posuere vel vestibulum ac, sollicitudin sed enim. Mauris ac vestibulum enim. Vivamus nulla nulla, tincidunt ut elementum quis, posuere eget velit. Nullam placerat blandit cursus. </p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2">Label Two</label>
<article>
<p>Vestibulum viverra, nisl in aliquet malesuada, ipsum tellus cursus nibh, et pellentesque lorem quam eu arcu. Vivamus ultricies gravida aliquam. Maecenas quis est lectus, in laoreet mi. Pellentesque eleifend nunc ac mi tempus laoreet. Maecenas sit amet nisi massa, ac laoreet arcu. Curabitur accumsan auctor adipiscing. Curabitur lacinia molestie nisi, sit amet sollicitudin neque aliquet eu. In lacus nisi, porttitor nec euismod sed, hendrerit sed eros. Integer eu felis velit, a vulputate mauris. Etiam dui magna, convallis vel tristique non, pharetra eu erat. Duis suscipit lectus quis elit volutpat sit amet semper elit dapibus. </p>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3">Label Three</label>
<article>
<p>Maecenas vitae mattis dolor. Cras sit amet elit ac mi facilisis iaculis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sollicitudin scelerisque justo eu bibendum. Nam ac odio tellus. Suspendisse tristique lectus vel mi tristique tristique. Morbi sed auctor libero. Aliquam sagittis vestibulum felis, ut varius tellus venenatis vitae. Donec ac nisi sem, et imperdiet nulla. Mauris vel nulla justo, in volutpat libero. Fusce vestibulum rutrum nibh vel scelerisque. Curabitur viverra libero nec enim adipiscing et venenatis ante auctor.</p>
</article>
</div>
<div>
<input id="ac-4" name="accordion-1" type="checkbox" />
<label for="ac-4">Label Four</label>
<article>
<p>Phasellus lobortis sapien et risus imperdiet tempor. Integer vestibulum ligula a velit eleifend rutrum. Nam erat magna, lacinia quis porta tempus, vulputate ac odio. Praesent vel mi vel purus malesuada convallis. Sed tincidunt euismod tortor. Mauris leo nibh, semper nec sodales sit amet, faucibus vel nunc. Morbi quis nibh quis diam semper blandit. Fusce vitae viverra sem. Phasellus tempor nunc in urna eleifend fermentum varius felis pretium. Mauris convallis felis vel massa vehicula ut ullamcorper est imperdiet. In orci leo, ullamcorper in varius a, aliquam id libero. Nam urna metus, dignissim sit amet egestas eu, sollicitudin ac lorem. Fusce ac libero sem, nec porttitor dui.</p>
</article>
</div>
<div>
<input id="ac-5" name="accordion-1" type="checkbox" />
<label for="ac-5">Label Five</label>
<article>
<p>Duis lectus tortor, malesuada vel viverra in, aliquam nec metus. Cras euismod enim et enim lacinia eleifend. Nunc ornare, mauris eleifend scelerisque suscipit, metus lorem rhoncus est, in porttitor mi ipsum at erat. Phasellus fermentum elit et purus tincidunt vel bibendum enim tincidunt. Etiam posuere risus id dolor volutpat nec auctor risus aliquet. Sed ac erat porttitor odio interdum venenatis et at arcu. Aenean quis massa ut sem tincidunt suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In pellentesque, lorem vitae ultrices posuere, elit nibh tincidunt nibh, nec lacinia diam sapien eu mauris. Sed euismod risus non libero imperdiet in fermentum elit vehicula. Vestibulum orci mi, sodales eu pellentesque at, ornare eu ipsum. Phasellus eget dolor ipsum, varius rhoncus turpis. Donec consectetur convallis ornare. </p>
</article>
</div>
<div>
<input id="ac-6" name="accordion-1" type="checkbox" />
<label for="ac-6">Label Six</label>
<article>
<p>Nullam hendrerit varius risus in vestibulum. Integer mattis gravida arcu, ut bibendum leo sagittis eget. In consectetur lorem adipiscing sem tincidunt placerat. Vestibulum sit amet lacus ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet justo dui, id consectetur ipsum. Ut hendrerit convallis nunc, eu mollis nulla ornare dapibus. Proin quam nulla, mollis eget laoreet ut, blandit id velit. Curabitur a odio risus, a cursus tortor. Aliquam erat volutpat. Vivamus eros odio, semper vel volutpat vel, commodo in eros. Sed porttitor malesuada nisi sed mattis. Etiam feugiat consequat rutrum. Sed in mi nunc, ornare tristique erat. Vestibulum a ligula dui. </p>
</article>
</div>
<div>
<input id="ac-7" name="accordion-1" type="checkbox" />
<label for="ac-7">Label Seven</label>
<article>
<p>Nullam elit ipsum, blandit nec dictum hendrerit, rutrum vitae ante. Sed accumsan porttitor placerat. Nullam feugiat congue rutrum. Morbi at quam eu mauris egestas dictum eget id odio. Maecenas sed turpis non nunc dapibus placerat. Vestibulum mattis auctor risus, in fringilla erat venenatis quis. Fusce posuere congue massa, sed semper odio iaculis porttitor.</p>
</article>
</div>
<div>
<input id="ac-8" name="accordion-1" type="checkbox" />
<label for="ac-8">label Eight</label>
<article>
<p>Integer quis lectus nec tellus egestas volutpat commodo bibendum massa. Phasellus iaculis iaculis magna, et semper nunc mattis quis. Praesent dictum, quam id sodales ornare, erat nibh dapibus nibh, eget porttitor dui sem et erat. Praesent lobortis vulputate nulla, nec sagittis justo ultrices eu. Sed at consectetur lacus. Cras molestie dictum lorem, ut tincidunt magna malesuada in. Praesent posuere mi eget justo mattis hendrerit. Proin vitae quam justo. Donec consequat mauris sed dui eleifend vitae dictum risus faucibus. Curabitur gravida consequat mi, ut hendrerit metus laoreet sed. Cras in justo quis neque hendrerit cursus ac vel eros. Sed pretium, lectus sed tempus lacinia, ipsum sapien dapibus elit, quis sodales nisl tortor quis sem. Donec aliquam nibh eget tellus ornare porta. Phasellus bibendum diam et mi pulvinar pellentesque.</p>
</article>
</div>
</section> <!-- .ac-container -->
</div> <!-- #container -->
</body>
</html>
CSS
body {
background: #202024;
color: #FFF;
font: .75em Arial, Helvetica, sans-serif;
}
#container {
width: 500px;
margin: 0 auto;
}
#container label {
font: 1.75em 'Oswald', Arial, Helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
color: #FFF;
padding: 5px 0;
position: relative;
z-index: 20;
display: block;
cursor: pointer;
border-top: 1px dashed #C5B7A6; /* ------- Problem 1 ------- */
-webkit-transition: color 0.5s ease-in-out;
-moz-transition: color 0.5s ease-in-out;
-o-transition: color 0.5s ease-in-out;
-ms-transition: color 0.5s ease-in-out;
transition: color 0.5s ease-in-out;
}
.ac-container label:first-of-type,
.ac-container label:first-child {
border: none; /* ------- Problem 1 ------- */
}
.ac-container label:hover {color: #EF7C4D;}
.ac-container label:checked {
color: #EF7C4D; /* ------- Problem 2 ------- */
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 0;
top: 7px;
background: transparent url(http://i.stack.imgur.com/l3caj.png) no-repeat center center;
}
.ac-container input:checked + label:hover:after {background-image: url(http://i.stack.imgur.com/CnUMt.png);}
.ac-container input {display: none;}
.ac-container article{
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
-ms-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
}
.ac-container article p {
padding: 5px;
/* opacity: 0; /* ------- Problem 3 ------- */
}
.ac-container input:checked ~ article {
height: 150px; /* ------- Problem 4 ------- */
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
-ms-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
}
.ac-container input:checked {height: auto;}
의 셀렉터는 IE8 이하가 이러한 것을 인식하지 못한다는 것을 알고있을 것입니다. 괜찮 으면 좋겠지 만 체크 아웃 할 가치가있을 것입니다. – Richlewis
아코디언을위한 slideToggle 메소드 저는 그/그녀가 질문에 광범위하게 사용하고 있으므로 CSS3를 실습하고 있다고 가정합니다 :) –
예, CSS3는 훌륭합니다. 직접 사용해 보시고 싶습니다. Cross browser compa 태도, 빠른 IE8 이하는 더 나은 제거됩니다 :) – Richlewis