Сделайте Bootstrap 4.3 по умолчанию закрытым - PullRequest
0 голосов
/ 16 мая 2019

Я использую Новейшую версию Bootstrap (4.3.1) и строю гармошку (элемент Collapse). Буквальное копирование и вставка кода из документации и всего аккордеонного контента открыты при загрузке страницы. Они должны быть закрыты (возможно, будет открыт только первый).

Даже изменение aria-extended или любого другого параметра не решает проблему. Пытался принудительно закрыть его с помощью js code $ ('. 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;
}

Я ожидаю, что контентная часть аккордеона будет закрыта по умолчанию.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...