Bootstrap развал data-parent не работает

Question

Я использую загрузчик 2.2.1 и по какой-либо причине атрибут data-parent не выполняет то, что предназначено. Он не закрывает предыдущую открытую цель, когда я щелкаю другую цель. Вот скрипка с кодом ниже, есть идеи, как это исправить?

<div id="accordion">
    <ul>
        <li>
            <a href="#" data-toggle='collapse' data-target='#document', data-parent='#accordion'>option 1</a>
            <ul id="document" class="collapse">
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
            </ul>   
        </li>
        <li>
            <a href="#">option 2</a>
        </li>
        <li>
            <a href="#">option 3</a>
        </li>
         <li>
            <a href="#" data-toggle='collapse' data-target='#document2', data-parent='#accordion'>option 4</a>
            <ul id="document2" class="collapse">
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
            </ul>   
        </li>
    </ul>
</div>

Answer 1

Я также не мог заставить это работать - это может быть что-то в Bootstrap JS, связанное с тем, что вы используете списки, а не div?

Поэтому, чтобы заставить его работать, мне пришлось переопределить событие click. Основываясь на этом вопросе здесь: Складной аккордеон не работает внутри Bootstrap dropdpwn-menu

Я добавил accordion-toggle Класс для каждой ссылки опции, а затем добавил следующий JavaScript, чтобы заставить его работать:

$(document).on('click', '.accordion-toggle', function(event) {
        event.stopPropagation();
        var $this = $(this);

        var parent = $this.data('parent');
        var actives = parent && $(parent).find('.collapse.in');

        // From bootstrap itself
        if (actives && actives.length) {
            hasData = actives.data('collapse');
            //if (hasData && hasData.transitioning) return;
            actives.collapse('hide');
        }

        var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7

        $(target).collapse('toggle');
});​

Эта скрипка показывает это в действии.

Answer 2

В Bootstrap Documents сказано:

Если предусмотрен селектор, тогда все свертываемые элементы под указанным родительским элементом будут закрыты при отображении этого свертываемого элемента. (похоже на традиционное поведение аккордеона - это зависит от panel класс)

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

http://getbootstrap.com/javascript/

Answer 3

Также боролся с крахом бутстрапа. Я пытался что-то сделать что-то немного другое. Я хотел встроенное поведение переключения. Смотрите мою скрипку JS ниже. Я обнаружил, что для начальной загрузки требуется наличие элемента "accordion-group" в дополнение к атрибуту data-parent, описанному в их документах. Так что либо есть ошибка в JS, либо их документы не включают ее. Я также должен был обнулить стили в группе аккордеонной группы...

http://jsfiddle.net/cssguru/SRFFJ/

<div id="accordion2">
   <div class="accordion-group" style="border:0;padding:0;margin:0">
      <div id="collapseOne" class="collapse in">
            Foo Bar...
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
               Show Herp Derp
            </a>
      </div>
      <div id="collapseTwo" class="collapse">
            Herp Derp...
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
               Show Foo Bar
            </a> 
      </div>
   </div>
</div>

Answer 4

Вы должны использовать класс аккордеонной группы в своих предметах, смотрите выпуск https://github.com/twitter/bootstrap/issues/4988