Измените плагин Twitter Bootstrap, чтобы держать аккордеоны открытыми

Question

Я пытаюсь изменить плагин "Свернуть Bootstrap", чтобы я мог указать, должен ли щелчок по аккордеону (открывать) автоматически закрывать другие элементы в аккордеоне (чтобы одновременно можно было открыть более одного элемента в аккордеоне)

Я хочу создать новый атрибут данных на аккордеоне, что-то вроде data-collapse-type="auto|manual"

Загрузочные плагины jQuery немного продвинуты для моего уровня квалификации. Наиболее релевантная часть того, с чем мне нужно связываться, кажется, в строке 52, actives.collapse('hide'), Я не хочу, чтобы это происходило, если установлено 'data-collapse-type="manual"' (без атрибута или параметра auto должен сохранять поведение по умолчанию).

Я создал jsfiddle, где я экспериментировал.

Может ли кто-нибудь помочь мне в этом?

Answer 1

Я разбудил и обновил вашу скрипку.

просто перейдите к функции.show, я также написал комментарии.

http://jsfiddle.net/2Rnpz/

Answer 2

На самом деле, вам не нужно изменять какой-либо код. Внимательно прочитайте следующее заявление на сайте twitterbootstrap

Просто добавьте data-toggle="collapse" и data-target для элемента, чтобы автоматически назначить контроль над складным элементом. Атрибут data-target принимает селектор css для применения свертывания. Обязательно добавьте свернутый класс в складной элемент. Если вы хотите открыть его по умолчанию, добавьте дополнительный класс в.

Так что вместо использования data-parent='#idofAccordion'использовать data-target='#idofCollapseItem',

Это должно работать отлично.

Вот демо на плункер

Answer 3

Поскольку вопрос не относится к конкретной версии Bootstrap, вот решение для начальной загрузки 4: удалите data-parent="#accordion" из тегов с data-toggle="collapse" приписывать. Это пример, взятый из документации Свернуть с data-parent=#accordion" немного снят.

bootply: https://www.bootply.com/3wV4WbzBtT

Answer 4

Техника, позволяющая одновременно открывать только один аккордеон (то есть свернуть все остальное), заключается в размещении обоих data-parent="#accordion" data-target="#collapseOne", чтобы это выглядело следующим образом

<a class="accordion-toggle" data-toggle="collapse" href="#"
    data-parent="#accordion" data-target="#collapseOne">
  Item #1
</a>

Вы можете посмотреть на это в plunker: http://plnkr.co/edit/56iXtA?p=preview