我目前正在尝试制作包含可折叠内容的致敬页面。我的问题是,当您单击第一个可折叠对象时,其余的都将打开。我希望仅在单击时可折叠式打开。它们总共是9个,而当用户仅单击一个时,将它们全部打开是没有意义的。
<html>
<body>
<header>
<h1>Remembering Dr. Stella Ameyo Adadevoh</h1>
<h4>The Woman Who Saved Nigeria From Ebola</h4>
</header>
<main id ="main">
<div id="img-div">
<img id ="image" src="./resources/images/adadevoh.jpg" alt="an image of the late Dr Adadevoh">
<h5>Dr. Stella Ameyo Adadevoh</h5>
</div>
</main>
<section>
<div class="collapse-list" id="tribute-info">
<input class="collapse-open" type="checkbox" id="collapse-1">
<label class="collapse-btn" for="collapse-1">Early Life And Family</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>Ameyo Adadevoh was born in Lagos, Nigeria in October 1956. She spent the majority of her life in Lagos, Nigeria. Her father and great-grandfather, s</p>
</div>
</div>
<input class="collapse-open" type="checkbox" id="collapse-2">
<label class="collapse-btn" for="collapse-2">Education</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>She went to preschool at the Mainland Preparatory Primary School in Yaba, Lagos (1961-1962). </p>
</div>
</div>
<input class="collapse-open" type="checkbox" id="collapse-3">
<label class="collapse-btn" for="collapse-3">Medical Education And Career</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>Dr. Adadevoh graduated from the University of Lagos, </p>
</div>
</div>
</div>
</section>
</body>
</html>
body {
margin: 0px 0px 0px 0px;
}
header {
width: 100%;
height: 100px;
background-color: silver;
text-align: center;
}
#main {
background-color: silver;
width: 100%;
margin: auto;
}
body {
padding: 10px;
}
#img-div {
width: 60%;
margin: auto;
display: flex;
justify-content: center;
height: 400px;
background-color: white;
flex-direction: column;
text-align: center
}
#tribute-info {
width: 100%;
height: 300px;
background-color: white;
}
body {
font-family: "Roboto";
font-size: 15px;
padding: 20px;
}
.collapse-list {
margin-bottom: 0;
padding-left: 0;
list-style: none;
border-bottom: 1px solid #e0e0e0;
}
.collapse-open {
display: none;
}
.collapse-panel {
visibility: hidden;
max-height: 0;
opacity: 0;
transition: max-height .1s,
visibility .3s,
opacity .3s;
}
.collapse-open:checked ~ .collapse-panel {
max-height: 100%;
opacity: 100;
visibility: visible
}
.collapse-list li {
margin-bottom: 0;
}
.collapse-list .collapse-btn {
border-top: 1px solid #e0e0e0;
cursor: pointer;
display: block;
padding: 15px 10px;
margin-bottom: 0;
color: #4285f4;
font-weight: normal;
transition: background-color .2s ease;
}
.collapse-list .collapse-btn:hover {
background: #eee;
}
.collapse-open ~ .collapse-btn:before {
content: "↓";
float: right;
}
.collapse-open:checked ~ .collapse-btn:before {
content: "↑";
}
.collapse-list .collapse-inner {
padding: 10px
}
这是罪魁祸首:.collapse-open:checked ~ .collapse-panel
-选中复选框时,collapse-panel
类的所有后继同级元素都会打开。
补救方法是移至adjacent兄弟选择器+
。但是,这需要稍微重构html部分,即交换input
和label
元素。
body {
margin: 0px 0px 0px 0px;
}
header {
width: 100%;
height: 100px;
background-color: silver;
text-align: center;
}
#main {
background-color: silver;
width: 100%;
margin: auto;
}
body {
padding: 10px;
}
#img-div {
width: 60%;
margin: auto;
display: flex;
justify-content: center;
height: 400px;
background-color: white;
flex-direction: column;
text-align: center
}
#tribute-info {
width: 100%;
height: 300px;
background-color: white;
}
body {
font-family: "Roboto";
font-size: 15px;
padding: 20px;
}
.collapse-list {
margin-bottom: 0;
padding-left: 0;
list-style: none;
border-bottom: 1px solid #e0e0e0;
}
.collapse-open {
display: none;
}
.collapse-panel {
visibility: hidden;
max-height: 0;
opacity: 0;
transition: max-height .1s,
visibility .3s,
opacity .3s;
}
.collapse-open:checked + .collapse-panel {
max-height: 100%;
opacity: 100;
visibility: visible
}
.collapse-list li {
margin-bottom: 0;
}
.collapse-list .collapse-btn {
border-top: 1px solid #e0e0e0;
cursor: pointer;
display: block;
padding: 15px 10px;
margin-bottom: 0;
color: #4285f4;
font-weight: normal;
transition: background-color .2s ease;
}
.collapse-list .collapse-btn:hover {
background: #eee;
}
.collapse-open ~ .collapse-btn:before {
content: "↓";
float: right;
}
.collapse-open:checked ~ .collapse-btn:before {
content: "↑";
}
.collapse-list .collapse-inner {
padding: 10px
}
javascripthtmlcssnode.js
<html>
<body>
<header>
<h1>Remembering Dr. Stella Ameyo Adadevoh</h1>
<h4>The Woman Who Saved Nigeria From Ebola</h4>
</header>
<main id ="main">
<div id="img-div">
<img id ="image" src="./resources/images/adadevoh.jpg" alt="an image of the late Dr Adadevoh">
<h5>Dr. Stella Ameyo Adadevoh</h5>
</div>
</main>
<section>
<div class="collapse-list" id="tribute-info">
<label class="collapse-btn" for="collapse-1">Early Life And Family</label>
<input class="collapse-open" type="checkbox" id="collapse-1">
<div class="collapse-panel">
<div class="collapse-inner">
<p>Ameyo Adadevoh was born in Lagos, Nigeria in October 1956. She spent the majority of her life in Lagos, Nigeria. Her father and great-grandfather, s</p>
</div>
</div>
<label class="collapse-btn" for="collapse-2">Education</label>
<input class="collapse-open" type="checkbox" id="collapse-2">
<div class="collapse-panel">
<div class="collapse-inner">
<p>She went to preschool at the Mainland Preparatory Primary School in Yaba, Lagos (1961-1962). </p>
</div>
</div>
<label class="collapse-btn" for="collapse-3">Medical Education And Career</label>
<input class="collapse-open" type="checkbox" id="collapse-3">
<div class="collapse-panel">
<div class="collapse-inner">
<p>Dr. Adadevoh graduated from the University of Lagos, </p>
</div>
</div>
</div>
</section>
</body>
</html>