我正在使用最新版本的Bootstrap(4.3.1)并构建一个手风琴(折叠元素)。从字面上复制和粘贴文档中的代码,并在页面加载时打开所有手风琴内容。它们应该关闭(也许只有第一个会打开)。
即使更改aria扩展或任何其他参数也无法解决问题。试图使用js代码$('。collapse')。collapse()强制关闭它,但仍然看不到我在做什么错。使用CSS将内容卡更改为不显示也不能解决该问题。
链接到codepen:https://codepen.io/A8-XPs/pen/yWbYeN?editors=1100
HTML
<div class="list-wrapper">
<ul class="list list-default has-line-effect">
<li id="accordion">
<div class="text left" id="headingOne">
<h3>List item name</h3>
<span class="arrow-wrapper">
</span>
<a class="btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>
</div>
<div class="right">
<div class="" id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion" >
<div class="card-body p-0">
<ul>
<li>
<a href="">Horaires des navires</a>
</li>
<li>
<a href="">Temps d’attentes des camions</a>
</li>
<li>
<a href="">Opérations</a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
CSS / SCSS:
ul.list-default > li {
border-bottom: 1px solid blue;
padding-top: 25px;
padding-bottom: 25px;
}
.bloc__list-basic-small .list-wrapper {
max-width: 350px;
}
.bloc__list-basic-small .list-wrapper ul.list {
border-top: 1px solid blue;
}
.bloc__list-basic-small .list-wrapper ul.list li .left {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 35px;
}
.bloc__list-basic-small .list-wrapper ul.list li .left .arrow-wrapper {
opacity: 0;
visibility: hidden;
transform: translateX(-20px);
}
.bloc__list-basic-small .list-wrapper ul.list li:hover .arrow-wrapper {
opacity: 1 !important;
visibility: visible !important;
transform: translateX(0) !important;
}
.bloc__list-basic-small.has-accordion .bloc__section-title {
margin-bottom: 0;
}
.bloc__list-basic-small.has-accordion .bloc__section-title .container {
padding-left: 0;
padding-right: 0;
}
.bloc__list-basic-small.has-accordion .bloc__section-title .desc,
.bloc__list-basic-small.has-accordion .bloc__section-title .right {
display: none;
}
.bloc__list-basic-small.has-accordion .bloc__section-title .wrapper {
border-bottom: none;
}
.bloc__list-basic-small.has-accordion .list-wrapper {
max-width: 540px;
}
.bloc__list-basic-small.has-accordion .list-wrapper ul.list {
border-top: 1px solid blue;
}
.bloc__list-basic-small.has-accordion .list-wrapper ul.list > li {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.bloc__list-basic-small.has-accordion .list-wrapper ul.list > li .left,
.bloc__list-basic-small.has-accordion .list-wrapper ul.list > li .right {
width: calc((100% - 30px) / 2);
}
.bloc__list-basic-small.has-accordion .list-wrapper ul.list > li .left {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 35px;
position: relative;
}
.bloc__list-basic-small.has-accordion .list-wrapper ul.list > li .left .btn-link:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: .2;
z-index: 3;
}
.bloc__list-basic-small.has-accordion .list-wrapper ul.list > li .right ul li {
margin-bottom: 2px;
}
.bloc__list-basic-small.has-accordion .list-wrapper ul.list > li .right ul a {
letter-spacing: 0.7px;
text-decoration: underline;
}
.bloc__list-basic-small.has-accordion .list-wrapper ul.list > li:hover .arrow-wrapper {
opacity: 1 !important;
visibility: visible !important;
transform: translateX(0) !important;
}
我希望默认情况下关闭手风琴的内容部分。