我的手风琴有问题-仅打开第一项。原因不是data-target。
当我在不使用CSS的情况下运行代码时，它可以工作...我试图从css中删除行以查看问题所在，然后发现问题出在Z-INDEX。
因为我将每个可折叠元素都放置在最后一个元素的后面，所以它们不可单击。我希望每个元素都位于另一个元素之后的原因是，每个卡片的底部边框pd是圆形的，因此我需要每个元素在其后隐藏一个元素的顶部：
https://jsfiddle.net/81co7502/
<section class="mobileSection">
<section id="aboutMobile">
<header class="hamNav">
<div class="container-fluid accordionRow">
<div class="row ">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 colsAccordion">
<div class="accordion" id="accordionExample">
<div class="card" id="historyCard">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
היסטוריה
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card" id="whoWeAreCard">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
מי אנחנו?
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card" id="numbersCard">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
"בשבילי" במספרים"
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card" id="sayingCard">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseThree">
צעירים אומרים...
</button>
</h5>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card" id="contactCard">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseThree">
צור קשר
</button>
</h5>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</section>
（在小提琴中，卡片看上去是矩形的，但在我的代码中，卡片的底部具有圆形边界）。
.hamNav {
margin-top: 50px;
}
#headingOne {
}
.card{
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
border:none;
}
#historyCard {
background-color: #ffb59b;
margin-top:-50px;
padding-top:60px;
}
#whoWeAreCard {
background-color: #ffe285;
margin-top: -80px;
padding-top: 70px;
z-index: -1;
}
#numbersCard {
background-color: #9abada;
margin-top: -90px;
padding-top: 80px;
z-index: -2;
}
#sayingCard {
background-color: #8adffa;
margin-top: -100px;
padding-top: 90px;
z-index: -3;
}
#contactCard {
background-color: #ffcd9b;
margin-top: -110px;
padding-top: 100px;
z-index: -4;
}
.card-header {
border: none;
background-color: rgba(0, 0, 0, 0);
height: 110px;
}
h5 {
text-align: center;
padding-top:25px;
}
有没有一种方法可以在不使用z-index的情况下实现我所需要的（隐藏后面元素顶部的元素）？
答案 0 :(得分：0)
我认为您正在使用padding减去margin值来解决将div放在另一个后面的问题...检查下面的代码，其中使用{{1} }，这样我们就不需要使用ID（您也可以将其用于颜色）。
:nth-child(99).card{ text-align: center; border-bottom-left-radius:25% !important;
border-bottom-right-radius:25% !important;
border:none !important; }
.card-header{padding: 30px; }
.accordion{ padding: 25px 0;}
#historyCard { background-color: #ffb59b; }
#whoWeAreCard { background-color: #ffe285; }
#numbersCard { background-color: #9abada; }
#sayingCard { background-color: #8adffa; }
#contactCard { background-color: #ffcd9b; }
.card:nth-child(1){top: -25px;}
.card:nth-child(2){top: -25px;}
.card:nth-child(3){top: -25px;}
.card:nth-child(4){top: -25px;}
.card:nth-child(5){top: -25px;}