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

Question

Я хотел бы выбрать два элемента div для расширения при нажатии на один триггер? Это возможно?

Answer 1

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

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

Answer 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>

Answer 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.

Answer 4

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

<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>

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

Answer 5

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

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

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

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

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

Answer 6

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

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

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

Смотрите: https://getbootstrap.com/javascript/.

Answer 7

у меня была такая же проблема, но bootstrap не позволял data-toggle = "tab" рядом с data-toggle = "collapsed", поэтому моя проблема заключалась в том, что я получил

                          <a type="button" class="btn btn-default btn-lg btn-block "  href="#ld-tab-pane-eye" aria-expanded="false" aria-controls="ld-tab-pane-eye" role="tab" data-toggle="tab"   aria-haspopup="true" aria-expanded="false" style=" border: 0px ;"> </a>

и это переключение вкладок, но этот

      <button  type="button" class="navbar-toggle collapsed nav-trigger style-mobile" data-toggle="collapse" data-target="#main-header-collapse" aria-expanded="false" data-changeclassnames='{ "html": "mobile-nav-activated overflow-hidden" }'>

закроет модальную кнопку вкладки переключателя cus была в модальном теперь я делаю это

я добавляю id = "popout" (к первой кнопке) & id = "popoutTrigger" (к отдельной кнопке)

и этот скрипт (jquery)

      $( "#popout" ).click(function() {
  $( "#popoutTrigger" ).trigger( "click" );
});

когда пользователь нажал кнопку переключателя в модальном режиме после переключения модального окна, это закроет представление о том, что я сделал

Надеюсь, мое странное решение кому-то поможет =)))

Answer 8

В Bootstrap 4 использование одного и того же класса для каждого соответствующего div, похоже, помогло использовать id.

Answer 9

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