當我單擊一個時，所有可折疊項都會打開

Question

我目前正在嘗試制作一個包含可折疊內容的致敬頁面。 我的問題是，當您單擊第一個可折疊時，它們的 rest 會打開。 我希望可折疊僅在單擊時打開。 它們總共有 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 。

補救方法是移動到相鄰兄弟選擇器+修改中途打開面板的選擇器：

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