Bootstrap проблема множественного коллапса - PullRequest
Новая
       3

Bootstrap проблема множественного коллапса

0 голосов
/ 23 марта 2020

У меня странная проблема с Bootstrap и его плагином Collapse. Я пытаюсь использовать функцию множественного свертывания, чтобы показать / скрыть несколько сворачиваемых материалов. Вот объяснение моего кода:

У меня есть три разборных контента и 2 кнопки свертывания. Первый показывает первый макет, а второй показывает второй и третий. При первом нажатии второй кнопки отображаются 2-й и 3-й макеты. Большой ! Но если я нажму в другой раз на первую кнопку, затем на вторую кнопку, теперь она покажет только 2-й макет.

Просто попробуйте фрагмент кода, чтобы увидеть, с чем возникла проблема. 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<div class="accordion" id="accordionExample">
  <div class="card">
    <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">
          BOOTSTRAP Collapsible Item #1 link
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Here is <strong>Collapsible Item #1 content</strong>. Now please click on <strong>Collapsible Item #2 link</strong>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false">
          BOOTSTRAP Collapsible Item #2 link
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse multi-collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Now you see <strong>Collapsible Item #2 content</strong> and...
      </div>
    </div>
    <div id="collapseThree" class="collapse multi-collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        ...<strong>Collapsible Item #3 content</strong>.
        But if you click another time on <strong>Collapsible Item #1 link</strong> and on <strong>Collapsible Item #2 link</strong> again, then <strong>Collapsible Item #3 content</strong> disappear :( Why ??
      </div>
    </div>
  </div>
</div>

У кого-нибудь есть идея? Большое спасибо:)

360.
...