admin管理员组

文章数量:814981

当我单击一个时，所有可折叠对象都打开

我目前正在尝试制作包含可折叠内容的致敬页面。我的问题是，当您单击第一个可折叠对象时，其余的都将打开。我希望仅在单击时可折叠式打开。它们总共是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>

本文标签： 当我单击一个时，所有可折叠对象都打开

版权声明：本文标题：当我单击一个时，所有可折叠对象都打开 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/biancheng/1715189688a822179.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。