使Bootstrap 4.3手风琴默认关闭

时间:2019-05-16 15:09:56

标签: twitter-bootstrap

我正在使用最新版本的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;
}

我希望默认情况下关闭手风琴的内容部分。

0 个答案:

没有答案