Свернуть родительские данные Bootstrap не работает

Я использую bootstrap 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>

jquery collapse twitter-bootstrap
person mfreitas    schedule 02.12.2012    source источник

Ответы (4)


arrow_upward
7
arrow_downward

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

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

Я добавил класс accordion-toggle к каждой ссылке option, а затем добавил следующий 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');
});​

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

person mccannf    schedule 02.12.2012
comment
Я использовал ваш код в своем проекте, и он не работает с IE9/8. - person Anup; 28.10.2013

arrow_upward
9
arrow_downward

В документах Bootstrap говорится:

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

поэтому его нужно использовать с группами панелей, но вы все равно можете переопределить javascript.

http://getbootstrap.com/javascript/#collapse-options

person Ian Zhao    schedule 08.03.2014
comment
Я не могу сказать, что было в 2012 году, но это правильный ответ из того, что я вижу сегодня. Я прошел через Bootstrap Collar.js, чтобы обнаружить, что он зависит от целей, находящихся (непосредственно) в классе панели внутри одного и того же родителя. Чувствовал себя довольно умно, а потом увидел, что вы сказали именно это, и указал, где это было в документации. - person Jake Kreider; 15.01.2015
comment
Я бы добавил - data-parent предполагается использовать вместо data-target, а не рядом. - person JNF; 27.03.2016
comment
Bootstrap 4 такой же, за исключением того, что это класс .card вместо .panel. - person Cal West; 23.04.2017

arrow_upward
7
arrow_downward

также боролся с крахом бутстрапа. Я пытался что-то сделать что-то немного другое. Я хотел встроенное поведение переключения. См. мою скрипту JS ниже. Я обнаружил, что начальная загрузка, по-видимому, требует наличия div «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>
person Adam Youngers    schedule 25.03.2013
comment
jsfiddle больше не действует - person Tatranskymedved; 19.10.2017

arrow_upward
5
arrow_downward

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

person vargat    schedule 08.04.2013