当我单击一个时，所有 Collabibles 打开

Question

我目前正在尝试制作一个包含可折叠内容的纪念页面。我的问题是，当您单击第一个可折叠项时，其余的将打开。我希望只有在单击时才打开可折叠。它们总共有 9 个，当用户只单击一个时，所有这些都打开是没有意义的。

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
}

<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>

Answer 1

这是罪魁祸首子句：.collapse-open:checked ~ .collapse-panel - class collapse-panel 的所有后继兄弟元素在选中复选框时打开。

补救措施是移动到 adjacent 兄弟选择器 + 修改途中打开面板的选择器:

/* old */ .collapse-open:checked ~ .collapse-panel
/* new */ .collapse-open:checked + label + .collapse-panel

控制箭头显示的选择器已更改为也可以使用相邻的兄弟选择器。

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 + label + .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
}

<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>

当我单击一个时，所有 Collabibles 打开

All Collapsibles Open When I Click One

html

javascript

css

dropdown