CSS Сворачиваемые группы - Bootstrap

#javascript #css #twitter-bootstrap-3

Вопрос:

Я использую сворачиваемую группу кнопок bootstrap. Я хочу, чтобы одновременно было видно только одно групповое поле. Я создал функцию в js для удаления класса «in» и изменения расширенного оператора aria, но я думаю, что это бесполезно, поскольку люди используют data-parent=»#myGroup».

По-видимому, data-parent=»#myGroup» не будет работать для меня по какой-то причине.

Я попытался использовать data-parent для одного элемента и для обеих кнопок и свернуть группу и до сих пор не могу заставить ее работать.

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

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<p>
  <button id="a" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#AA" aria-expanded="false" aria-controls="AA" data-parent="#myGroup">
  A
  </button>

  <button id="b" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#BB" aria-expanded="false" aria-controls="BB" data-parent="#myGroup">
    B
  </button>

    <button id="c" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#CC" aria-expanded="false" aria-controls="CC" data-parent="#myGroup">
    C
  </button>

      <button id="d" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#DD" aria-expanded="false" aria-controls="DD" data-parent="#myGroup">
    D
  </button> 
</p>


<div class="collapse" id="AA" data-parent="#myGroup">
  <div class="card card-block">
   bla bla bla
  </div>
</div>


<div class="collapse" id="BB" data-parent="#myGroup">
  <div class="card card-block">
bla bla bla
  </div>
</div>




<div class="collapse" id="CC" data-parent="#myGroup">
  <div class="card card-block">
    bla bla bla
  </div>
  </div>



<div class="collapse" id="DD" data-parent="#myGroup">
  <div class="card card-block">
    bla bla bla
      </div>
    </div>

</body>
</html>

Ответ №1:

Это будет работать.

http://plnkr.co/edit/HlrIvDW71JSVemkbhejy?p=preview

 <div id="container">
  <div class="panel">
    <p>
        <button id="a" class="btn btn-primary" data-toggle="collapse" data-target="#AA" data-parent="#container">
          A
        </button>
        <button id="b" class="btn btn-primary" data-toggle="collapse" data-target="#BB" data-parent="#container">
          B
        </button>
    </p>

    <div class="collapse" id="AA">
      <div class="card card-block">
          bla bla bla A
      </div>
    </div>

    <div class="collapse" id="BB">
      <div class="card card-block">
         bla bla bla B
      </div>
    </div>
  </div>
</div>

Ответ №2:

Это не то, что вы хотите. У Bootstrap нет этой опции.

У вас есть 3 варианта:

Используйте аккордеон из Bootstrap -> http://getbootstrap.com/javascript/#collapse
Используйте вкладки из Bootstrap -> http://getbootstrap.com/javascript/#tabs (Это лучший вариант, если вы не хотите программировать. Вам просто нужно изменить стили вкладок, такие как кнопки.)
Запрограммируйте это самостоятельно.