Bootstrap 3 Кнопка "Аккордеон" переключает "данные-родительские", не работает

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

Однако я не могу заставить атрибут data-parent работать. Я хочу, когда открываю вопрос, все остальные закрываются. Я читаю документы (http://getbootstrap.com/javascript/#collapse-usage), но все равно не может заставить его работать.

Я использую следующий код:

<div class="accordion" id="myAccordion">
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
    <div id="collapsible-1" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
    <div id="collapsible-2" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
    <div id="collapsible-3" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
</div>

Вот JSFiddle: http://jsfiddle.net/twinsen/AEew4/

Я буду очень рад, если кто-то укажет на меня, где я делаю ошибку:\

Ответы

Ответ 1

См. эту проблему в GitHub: https://github.com/twbs/bootstrap/issues/10966

Существует "ошибка", которая делает аккордеон зависимым от класса .panel при использовании атрибута data-parent. Чтобы обойти это, вы можете обернуть каждую группу аккордеона в div-панели.

http://bootply.com/88288

<div class="accordion" id="myAccordion">
    <div class="panel">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
        <div id="collapsible-1" class="collapse">
            ..
        </div>
    </div>
    <div class="panel">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
        <div id="collapsible-2" class="collapse">
            ..
        </div>
    </div>
    <div class="panel">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
        <div id="collapsible-3" class="collapse">
           ...
        </div>
    </div>
</div>

Edit

Как указано в комментариях, каждый раздел не должен быть .panel. Однако...

.panel должен быть прямым дочерним элементом элемента, используемого как data-parent=
каждый раздел аккордеона (data-toggle=) должен быть прямым дочерним элементом .panel (http://www.bootply.com/AbiRW7BdD6#)

Ответ 2

Обратите внимание, что не только зависимость от .panel, но и зависимость от структуры DOM.

Убедитесь, что ваши элементы структурированы следующим образом:

    <div id="parent-id">
        <div class="panel">
            <a data-toggle="collapse" data-target="#opt1" data-parent="#parent-id">Control</a>
                <div id="opt1" class="collapse">
...

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

FYI, у меня было больше уровней между управляющим div и содержимым div, и это не сработало.

Ответ 3

Как сказал Blazemonger, #parent,.panel и .collapse должны быть прямыми потомками. Однако, если вы не можете изменить свой html, вы можете обходным путем использовать события и методы начальной загрузки с помощью следующего кода:

$('#your-parent .collapse').on('show.bs.collapse', function (e) {
    var actives = $('#your-parent').find('.in, .collapsing');
    actives.each( function (index, element) {
        $(element).collapse('hide');
    })
})

Ответ 4

Попробуйте это. Простое решение без зависимостей.

$('[data-toggle="collapse"]').click(function() {
  $('.collapse.in').collapse('hide')
});

Ответ 5

Если обнаружено, что это изменение в ответ Кшиштофа помогло моей проблеме

$('#' + parentId + ' .collapse').on('show.bs.collapse', function (e) {            
    var all = $('#' + parentId).find('.collapse');
    var actives = $('#' + parentId).find('.in, .collapsing');
    all.each(function (index, element) {
      $(element).collapse('hide');
    })
    actives.each(function (index, element) {                
      $(element).collapse('show');                
    })
})

если у вас есть вложенные панели, вам также может потребоваться указать, какие из них добавляются другим именем класса, чтобы различать их и добавлять в селектор в приведенном выше JavaScript

Ответ 6

У меня такая же проблема при переключении аккордеона. Но когда я пытаюсь поместить блок script в блок заголовка, он работает для моего случая!!

<head>   
...   
<link rel="stylesheet" href="../assets/css/bootstrap.css" />       
<script src="../assets/js/jquery-1.9.1.min.js" ></script>   
<script src="../assets/js/bootstrap.js" ></script> 
</head>