Блог

Главная - Вопросы по программированию - Как вы показываете только один складной элемент за раз?

Как вы показываете только один складной элемент за раз?

javascript #html #css #twitter-bootstrap

#javascript #HTML #css #twitter-bootstrap

Вопрос:

Все это в названии. По сути, я работаю с первым примером с этой страницы начальной загрузки. На этой странице нет примера, который показывал бы, как сворачивать другие элементы, когда вы щелкаете и разворачиваете другой элемент. Я в принципе хочу, чтобы это работало аналогично аккордеону, когда вы нажимаете на другой элемент, тот, который у вас был открыт, скрывается (закрывается), а тот, на который вы нажали, расширяется. Пожалуйста, помогите мне с этим, я действительно пытаюсь разобраться в этом, но я изо всех сил. Вот несколько демонстрационных кодов из Bootstrap 5. Как бы я мог сделать так, чтобы это были два уникальных элемента с уникальным содержимым, и когда вы нажимаете на один, он расширяется, а другой, который открыт, закрывается. Большое спасибо за вашу помощь — Демонстрационный код ниже — ссылка на этот пример прикреплена выше. Эти обе кнопки имеют уникальное содержимое, но их обе можно открывать одновременно — я не хочу этого, я хочу, чтобы только одна открывалась одновременно, а другая закрывалась по щелчку. Спасибо — Любое решение приветствуется

 <p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

Комментарии:

1. причина, по которой вы не используете bootstrap accordion?

2. Я сохраняю элементы горизонтальными — все примеры аккордеонов вертикальные — Как вы думаете, аккордеон будет работать в горизонтальном положении? В принципе, я создаю что-то похожее на это luna.sainsburys.co.uk/guidelines — на этой странице в начале есть 6 основных кнопок, и когда вы нажимаете на них, они раскрывают различные разделы. Это то, к чему я стремлюсь 🙂 — дайте мне знать, что, по вашему мнению, было бы лучше.

Ответ №1:

Оберните сворачивание в один div с идентификатором. И используйте атрибут data-target с родительским идентификатором.

 <div id="abc">
  <p>
    <a
      class="btn btn-primary"
      data-bs-toggle="collapse"
      href="#multiCollapseExample1"
      role="button"
      aria-expanded="false"
      aria-controls="multiCollapseExample1"
      >Toggle first element</a
    >
    <button
      class="btn btn-primary"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#multiCollapseExample2"
      aria-expanded="false"
      aria-controls="multiCollapseExample2"
    >
      Toggle second element
    </button>
  </p>
  <div class="row">
    <div class="col">
      <div
        class="collapse multi-collapse"
        id="multiCollapseExample1"
        data-bs-parent="#abc"
      >
        <div class="card card-body">
          Some placeholder content for the first collapse component of this
          multi-collapse example. This panel is hidden by default but
          revealed when the user activates the relevant trigger.
        </div>
      </div>
    </div>
    <div class="col">
      <div
        class="collapse multi-collapse"
        id="multiCollapseExample2"
        data-bs-parent="#abc"
      >
        <div class="card card-body">
          Some placeholder content for the second collapse component of this
          multi-collapse example. This panel is hidden by default but
          revealed when the user activates the relevant trigger.
        </div>
      </div>
    </div>
  </div>
</div>
Метки: