純css手寫手風琴 -开发者知识库
---恢復內容開始---
在網頁中我們經常會遇到手風琴效果，之前經常會用jQuery和JavaScript來寫，但今天給大家介紹一種用純css寫的手風琴。
下面是html部分：
1 <div class="togglebox">
2 <input id="toggle1" type="radio" name="toggle" checked="checked" /> <!--checked="checked"添加默認展開樣式-->
3 <label for="toggle1">Pure CSS Accordion</label>
4 <section id="content1">
5 <p>
6 Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulde r bresaola.Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
7 </p>
8 <p>
9 Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare rib s pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
10 </p>
11 </section>
12 <input id="toggle2" type="radio" name="toggle" />
13 <label for="toggle2">Pure CSS Accordion</label>
14 <section id="content2">
15 <p>
16 Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulde r bresaola.Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
17 </p>
18 <p>
19 Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare rib s pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
20 </p>
21 </section>
22 <input id="toggle3" type="radio" name="toggle" />
23 <label for="toggle3">Pure CSS Accordion</label>
24 <section id="content3">
25 <p>
26 Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulde r bresaola.Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
27 </p>
28 <p>
29 Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare rib s pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
30 </p>
31 </section>
32 <input id="toggle4" type="radio" name="toggle" />
33 <label for="toggle4">Pure CSS Accordion</label>
34 <section id="content4">
35 <p>
36 Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulde r bresaola.Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
37 </p>
38 <p>
39 Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare rib s pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
40 </p>
41 </section>
42 </div>
下面是css樣式：
<style type="text/css">
* {
margin: 0;
padding: 0;
}
*,*:before,
*:after {
box-sizing: border-box;
}
html,body {
height: 100%;
font: 16px/1 'Open Sans', sans-serif;
color: #555;
background: #e5e5e5;
}
body {
padding: 50px;
}
.togglebox {
width: 400px;
margin: 0 auto;
background: #fff;
transform: translateZ(0);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
input[type="radio"] {
position: absolute;
opacity: 0;
}
label {
position: relative;
display: block;
height: 50px;
line-height: 50px;
padding: 0 20px;
font-size: 14px;
font-weight: 700;
border-top: 1px solid #ddd;
background: #fff;
cursor: pointer;
background: palegreen;
}
label[for*='1'] {
border: 0;
}
label:after {
content: '<'; /*在label之后 加一個下拉圖標*/
position: absolute;
top: 0px;
right: 20px;
transition: .3s transform;
}
section {
height: 0; /*未被選中之前section高度為0*/
transition: .3s all;
overflow: hidden;
}
#toggle1:checked~label[for*='1']:after,
#toggle2:checked~label[for*='2']:after,
#toggle3:checked~label[for*='3']:after,
#toggle4:checked~label[for*='4']:after { /*單選框點擊選中以后 圖標旋轉-90度*/
transform: rotate(-90deg);
}
#toggle1:checked~#content1,
#toggle2:checked~#content2,
#toggle3:checked~#content3,
#toggle4:checked~#content4 {
height: 200px; /*單選框未被選中內容高度為0，單選框選中之后內容高度為200*/
}
p {
margin: 15px 0;
padding: 0 20px;
font-size: 12px;
line-height: 1.5;
}
</style>
下面是效果：
這是一種很有用的手風琴，而且可以不用任何的JavaScript和jQuery！！！
---恢復內容結束---
最佳答案：
本文经用户投稿或网站收集转载，如有侵权请联系本站。
