Могу ли я указать несколько целей данных для Twitter-бутстрапа?

Ответ 1

Вы можете просто добавить все идентификаторы, разделенные запятыми в цели данных:

  <button type="button" class="btn btn-primary dropdown-toggle btn-sm" 
  data-toggle="collapse" data-target="#demo,#demo1,#demo2">Hide them all</button>

Ответ 2

Используйте тот же класс для div и установите data-target в соответствии с этим. Дайте вашему div также один и тот же родитель (также может быть классом) и установите data-parent в соответствии с этим.

<button type="button" class="btn btn-danger" data-parent="#wrap" data-toggle="collapse" data-target=".demo">
      simple collapsible
    </button>
    <div id="wrap">
    <div class="demo collapse">
    test1
    </div>
    <div class="demo collapse">
    test1
    </div>
    </div>

Ответ 3

Из документации по Bootstrap 3:

Атрибут data-target принимает CSS-селектор для применения свертывания.

Поэтому вы можете использовать разделенный запятыми список идентификаторов, селектор класса и т.д. Для значения атрибута data-target:

<button class="btn btn-primary" type="button"
    data-toggle="collapse" data-target="#target1,#target2,#target3"
    aria-expanded="false" aria-controls="target1,target2,target3">

Вы можете увидеть обширный список действительных селекторов CSS на веб-сайте w3schools.

Ответ 4

Если вы хотите скрыть один элемент и показать другой (например, аккордеон начальной загрузки, но без панели), вы можете добавить несколько целей, а также добавить класс "в", чтобы один элемент расширялся при загрузке!

<div class="collapse text-center clearfix in" id="section1">
   <h1>This is section 1</h1>
   <p>Are you excited about toggling?</p>
</div>
<div class="collapse text-center clearfix alert-warning" id="section2">
   <h1>Boo!!</h1>
   <p>This is a new sentence</p>
</div>
<button class="btn btn-block btn-primary" data-toggle="collapse" data-target="#section1,#section2">Toggle</button>

Живая демо здесь

Ответ 5

Ответ на целевые данные не помог мне. Однако вы можете использовать JavaScript для этого.

Сделайте вашу кнопку, чтобы вызвать JavaScript:

$('.collapse-class').collapse('toggle')

Смотрите: https://getbootstrap.com/javascript/#via-javascript-3.

Ответ 6

В Bootstrap 4 есть решение:

Документация по Bootstrap 4: несколько целей

По крайней мере, вам нужно это:

• data-toggle="collapse" data-target=".multi-collapse" для кнопки переключения
• class="collapse multi-collapse" для каждого элемента, который нужно переключить

(Хотя несколько идентификаторов в data-target действительно не работают).

Ответ 7

Bootstrap 4 использует document.querySelector вместо document.querySelectorAll. Если это изменится, то все работает.