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

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

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

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

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

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

Ответы

Ответ 1

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

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

http://jsfiddle.net/2Rnpz/

Ответ 2

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

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

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

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

Вот демон на plunker

Ответ 3

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

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

Ответ 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