Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d8843a1

Browse files
修复手风琴展开动画失效
1 parent edafb55 commit d8843a1

File tree

5 files changed

+62
-36
lines changed

5 files changed

+62
-36
lines changed

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
1. 下拉导航栏
33

44
![下拉导航栏](demoImages/下拉导航栏.png)
5+
56
2. 侧边栏
67

78
![侧边栏](demoImages/侧边栏.png)
@@ -14,4 +15,7 @@
1415
![弹窗](demoImages/弹窗.png)
1516

1617
5. 手风琴
18+
19+
![手风琴](demoImages/手风琴.png)
20+
1721
6. 轮播图

‎demoImages/手风琴.png‎

97.9 KB
Loading[フレーム]

‎手风琴/css/style.css‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
.container {
2-
width: 60%;
2+
width: 50%;
33
margin: auto;
4+
/* background-color: #CCFFFF; */
5+
46
}
57

68
.accordion {
79
width: 100%;
10+
text-align:center;
811
font-size: 20px;
9-
background-color: #eee;
12+
background-color: #CCFFFF;
1013
}
1114

1215
.panel {
1316
max-height: 0;
1417
overflow: hidden;
15-
transition: max-height 1s ease-out;
18+
transition: max-height 1s ease-in;
1619
}
17-
1820
.accordion:hover, .accordion.active{
19-
background-color: #ddd;
21+
background-color: #FFFFCC;
2022
}

‎手风琴/index.html‎

Lines changed: 43 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,57 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<link rel="stylesheet" href="css/style.css">
67
<title>手风琴</title>
78
</head>
9+
810
<body>
9-
<div class="container">
10-
<div class="accordion">
11-
选项1
12-
</div>
13-
<div class="panel">
14-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
15-
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
16-
ea commodo consequat.</p>
17-
</div>
11+
<div class="container">
12+
<div class="accordion">
13+
选项1
14+
</div>
15+
<div class="panel">
16+
<p>本来想设置heght=100% 但是发现会导致动画效果失效。同样的max-height=100% 也会实现。
17+
所以js使用maxHeight设置一个比较大的值来模拟。</br>
18+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
19+
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
20+
ex
21+
ea commodo consequat.
22+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
23+
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
24+
ex
25+
ea commodo consequat.
26+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
27+
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
28+
ex
29+
ea commodo consequat.
30+
</p>
31+
</div>
1832

19-
<div class="accordion">
20-
选项2
21-
</div>
22-
<div class="panel">
23-
<p>idunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
24-
nisi
25-
ut aliquip ex ea commodo consequat.</p>
33+
<div class="accordion">
34+
选项2
35+
</div>
36+
<div class="panel">
37+
<p>idunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
38+
laboris
39+
nisi
40+
ut aliquip ex ea commodo consequat.</p>
2641

42+
</div>
43+
<div class="accordion">
44+
选项3
45+
</div>
46+
<div class="panel">
47+
<p>idunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
48+
laboris
49+
nisi
50+
ut aliquip ex ea commodo consequat.</p>
51+
</div>
2752
</div>
28-
<div class="accordion">
29-
选项3
30-
</div>
31-
<div class="panel">
32-
<p>idunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
33-
nisi
34-
ut aliquip ex ea commodo consequat.</p>
35-
</div>
36-
</div>
37-
<script src="js/accord.js"></script>
53+
<script src="js/accord.js"></script>
3854

3955
</body>
56+
4057
</html>

‎手风琴/js/accord.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
1-
alert('nihao');
21
var acc=document.getElementsByClassName('accordion');
32
console.log(acc);
43
for(let i=0;i<acc.length;i++){
54
acc[i].onclick=function () {
6-
console.log('dianji');
5+
console.log('点击 的panel序号',i);
76
acc[i].classList.toggle('active');
7+
//获取相邻的下一个元素,即panel
88
var panel=acc[i].nextElementSibling;
9-
if(panel.style.maxHeight){
10-
console.log('当前尺寸为!=0');
9+
console.log(panel.style.maxHeight)
10+
if(panel.style.maxHeight!=0){
1111
panel.style.maxHeight=null;
12+
console.log('当前关闭的尺寸为',panel.style.maxHeight);
1213

1314
}else{
14-
panel.style.maxHeight="100%";
15+
panel.style.maxHeight="500px";
16+
console.log('当前打开的尺寸为', panel.style.maxHeight);
17+
1518
}
1619
}
1720

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /