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

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

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

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

Я создал jsfiddle, где я был experiementing.

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

4 59
javascript oop jquery twitter-bootstrap

4 ответа:

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

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

http://jsfiddle.net/2Rnpz/

5

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

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

поэтому вместо использования data-parent='#idofAccordion' используйте data-target='#idofCollapseItem'.

Он должен работать идеально.

здесь демо на plunker

211

поскольку вопрос не относится к конкретной версии Bootstrap, вот решение bootstrap 4: уберите data-parent="#accordion" от тега

1

метод для того, чтобы иметь только один аккордеон открыт одновременно(то есть свернуть остальные), помещает оба 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

-3