Bootstrap 4 аккордеон не работает

Collapse

Переключайте видимость контента в вашем проекте несколькими классами, нашим плагином переключения видимости и JavaScript.

Примеры

Кликните по кнопке внизу, чтобы показать и скрыть элемент с помощью изменения его класса:

• .collapse скрывает содержимое
• .collapsing применяется во время переходов
• .collapse.show показывает содержимое

Вы можете использовать ссылку с атрибутом href или кнопку с атрибутом data-target . В обоих случаях требуется атрибут data-toggle=»collapse» .

Ссылка с href Кнопка с data-target

Взаимодействие со множественными объектами

Переключить 1-ый элемент Переключить 2-ой элемент Переключить оба элемента

Разворачиваемые панели

Используя компонент «карточка», можно расширить стандартное поведение сворачивания для создания «аккордеона», т.е. столбца сворачиваемых панелей (для экономии места).

Разворачиваемая панель #1

Разворачиваемая панель #2

Разворачиваемая панель #3

Доступность

Добавьте aria-expanded к «контролирующему» элементу. Этот атрибут явно передает текущее состояние скрываемого элемента, привязанного к «контролирующему» элементу, «экранным читалкам» и прочим вспомогательным технологиям. Если скрываемый элемент скрыт по умолчанию, его aria-expanded должен быть «false» aria-expanded=»false» . Если раньше вы определяли скрываемый элемент показываемым по умолчанию через класс show , теперь используйте вместо этого класса aria-expanded=»true» в «контролирующем» элементе. Основываясь на том, показан или скрыт элемент, плагин будет автоматически переключать этот атрибут (через JavaScript либо через отслеживание клика по другому «контролирующему» элементу, связанному с данным скрываемым элементом).

Дополнение: если ваш «контролирующий» элемент взаимодействует с одним скрываемым элементом – т.е. атрибут data-target указывает на # id – вы можете добавить дополнительный атрибут aria-controls к «контролирующему» элементу, содержащему # id этого скрываемого элемента.

Использование

Плагин «скрытия\показа» использует несколько классов для работы c даже «тяжелыми» элементами:

• .collapse прячет содержимое
• .collapse.show показывает содержимое
• .collapsing добавляется, когда переход начинается и удаляется с его завершением

Эти классы можно найти в _transitions.scss .

Через атрибуты

Добавьте в элемент атрибуты data-toggle=»collapse» и data-target для автоматического контроля одного или более скрываемых элементов. Атрибут data-target принимает CSS-селектор для применения к нему поведения toggle’a. Удостоверьтесь, что добавили в скрываемый элемент класс collapse . Если он должен быть показан по умолчанию, добавьте в него класс show .

Для добавления компактно расположенной (см. Разворачиваемые панели для экономии места) группы «контролирующих» элементов добавьте атрибут data-parent=»#selector» . Обратитесь к демо для просмотра в действии.

Через JavaScript

Параметры

Параметры можно передавать через атрибуты или JavaScript. Чтобы сделать это через атрибуты, добавьте имя параметра к data- , например data-parent=»» .

Имя	Тип	По умолч.	Описание
parent	selector | jQuery object | DOM element	false	Если есть родительский элемент, все скрываемые элементы под определенным «родителем» закроются, когда он открыт (как в «аккордеоне» — это зависит от класса card ). Атрибут нужно устанавливать в скрываемой зоне.
toggle	boolean	true	Взаимодействует с скрываемым элементом по обращению

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.

.collapse(options)

Задействует ваше содержимое как скрываемый элемент. Принимает object дополнительных опций.

.collapse(‘toggle’)

Задействует на скрываемом элементе функциональность toggle’а (hide\show). Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки событий shown.bs.collapse или hidden.bs.collapse event occurs).

.collapse(‘show’)

Показывает скрываемый элемент. Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки события shown.bs.collapse ).

.collapse(‘hide’)

Прячет скрываемый элемент. Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки события hidden.bs.collapse ).

.collapse(‘dispose’)

Уничтожает «коллпас» элемента.

События

Класс «коллапса» в Bootstrap содержит несколько событий для вовлечения, взаимодействия и связи иных событий JS с функциональностью «коллапса».

Источник

Не срабатывает аккордеон

Комментарий модератора

Используйте соответствующие теги в редакторе для форматирования кода!

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Запрос срабатывает в SQL Server, но не корректно срабатывает в Visual Studio 2017
(SELECT ROW_NUMBER() over (ORDER BY AVG(Отметки.Отметка) DESC) ID, .ФИО, .Группа, Отметки.

Таймер срабатывает раньше времени или вообще не срабатывает
Помогите, пожалуйста, разобраться, что нетак с таймером. Браузер Chrome При создании записи.

Аккордеон
Здравствуйте, при нажатии на h3 аккордеон работает, если в коде h3 заменить на li, то аккордеон.

Аккордеон
Вообщем уже около недели периодически разбиваюсь о «камни». Нужно чтоб меню обратно.

Записывайтесь на профессиональные IT-курсы здесь

я подключаю из из другого источника. Это правильно, или хотя бы допустимо?

Добавлено через 7 минут
не правится уже предыдущее сообщение придется исправленное еще раз прописать

Решение

Решение

Обучайтесь IT-профессиям с гарантией трудоустройства здесь.

Аккордеон
Подскажите,как сделать аккордеон открывающийся влево, при этом чтобы все его элементы также плавно.

Аккордеон
Уже 2й день немогу найти jb,re по причине незнакия java, помогите осознать и исправить. var.

widgetkit аккордеон
У меня joomla2.5 Скачала и установила widgetkit аккордеон. Все работало. Но перенесла на хостинг.

Меню аккордеон
Есть менюшка аккордеон. Как сделать так чтоб первый пункт меню по-умолчанию (при загрузке.

Источник

Компоненты

Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.

Collapse

В Bootstrap плагин свертывание позволяет переключать контент на ваших страницах с помощью нескольких классов благодаря некоторым полезным JavaScript.

Содержание

Пример

Нажмите на ссылку ниже, чтобы показать и скрыть другой элемент через изменения класса:

• .collapse скрывает содержание
• .collapsing применяется во время переходов
• .collapse.in показывает содержание

Вы можете использовать ссылку с href атрибут, или кнопка с атрибутом data-target . В обоих случаях data-toggle=»collapse» необходима.

Link with href Button with data-target

Пример Аккордеон

Унаследовать collapse по умолчанию, чтобы создать аккордеон.

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

Доступность

Не забудьте добавить aria-expanded элементу управления. Этот атрибут однозначно определяет ток состояние сборного элемента на экране читателей и подобных вспомогательных технологий. Если складной элемент закрыт по умолчанию, он должен иметь значение aria-expanded=»false» . Если вы установите складной элемент, который будет открыт по умолчанию, используя in класс, набор aria-expanded=»true» , а не на контроль. Плагин будет автоматически переключаться на этот атрибут, если не разборный элемент был открыт или закрыт.

Кроме того, если элемент ориентирован на один складной элемент, т. е. data-target атрибут, указывающий на id селектор – можно добавить дополнительные aria-controls атрибут в элемент, содержащий id складной элемент. Современные читатели экраном и подобных вспомогательных технологий используйте этот атрибут, чтобы предоставить пользователям дополнительные клавиши, чтобы перейти непосредственно к самой складной элемент.

Использование

Плагин распада использует несколько классов для обработки тяжелую работу:

• .collapse скрывает содержимое
• .collapse.in показывает содержимое
• .collapsing добавляется при переходе начинается, и удаляется, когда это заканчивается

Эти классы можно найти в _animation.scss .

С помощью данных атрибутов

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

Чтобы добавить гармошкой управления группа складной-контроль, добавьте атрибут Data data-parent=»#selector» . Ознакомьтесь с демо, чтобы увидеть это в действии.

Через JavaScript

Варианты

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, введите имя параметр data- , а на data-parent=»» .

Имя	Тип	По умолчанию	Описание
parent	selector	false	Если имеется селектор, потом все разборные элементы в указанной родительской будет закрыт, когда этот складной элемент отображается. (аналог традиционного поведения аккордеон — это зависит от panel класс)
toggle	boolean	true	Переключает складной элемент на вызов

Методы

.collapse(options)

Активирует ваш Контент как разборный элемент. Принимает необязательный варианты object .

.collapse(‘toggle’)

Переключает складной элемент показаны или скрыты.

.collapse(‘show’)

Показывает складной элемент.

.collapse(‘hide’)

Скрывает складной элемент.

События

Bootstrap класс крах предоставляет несколько событий для навешивания на функциональность крах.

Тип События	Описание
show.bs.collapse	Это событие возникает сразу же, когда show способ экземпляра называется.
shown.bs.collapse	Это событие запускается, когда элемент развал был сделан видимым для пользователя (будет ждать CSS переходы для завершения).
hide.bs.collapse	Это событие сразу же уволили, когда hide метод был вызван.
hidden.bs.collapse	Это событие запускается, когда элемент развал был скрыт от пользователя (будет ждать CSS переходы для завершения).

Спроектированы и построены со всей любовью в мире @mdo и @fat. Поддерживается основной командой с помощью наших спонсоров.

Сейчас v4.0.0-alpha.4. Код лицензии MIT, документы CC BY 3.0.

Источник

bootstrap 4 аккордеон не работает правильно он работает только для первого элемента

этот аккордеонный код не работает в моем проекте html. Я слишком много раз пытался это сделать, но безуспешно.

также попробовал фрагмент w3school выше. первый работает очень хорошо, но всякий раз, когда я пытаюсь свернуть второй, он не работает. он рухнет на пару миллисекунд, после чего автоматически получит свойство display none.

Я также пытался активно свернуть через jquery, но результат тот же.

2 ответа

Мне нужно сделать что-то вроде простой вертикальной карусели. На hover и scroll мне нужно прокрутить внутренний ul к следующему или предыдущему элементу li (это зависит от направления прокрутки), изменить класс current для текущего элемента и классы prev и past для предыдущего и следующего.

Я пытаюсь научиться реагировать. Давая ему идти, я экспериментировал с реагировать-Bootstrap и пытался внедрить аккордеон с использованием реагируют-загрузки аккордеон. Сначала я попробовал использовать ButtonToolBar, он работал нормально. var ButtonToolbar = ReactBootstrap.ButtonToolbar; var.

Вот работает fiddle для вас

Я думаю,что вы просто забыли включить jQuery перед загрузочным скриптом.

Просто проверьте свой импорт, должен выглядеть как-то так:

и jQuery импорт вдобавок ко всему этому

Ваш код работает.

Но проверьте, включили ли вы все необходимые файлы для bootstrap 4, а также jQuery, если это необходимо.

Оформление заказа: демо -версия

Похожие вопросы:

Пример, скопированный непосредственно из http://angular-ui.github.io/загрузочный / Не работает вообще, ни локально, ни в планкере. Не знаю почему. Bootstrap CSS загружен, как и.

мой bootstrap 2.3 аккордеон не работает должным образом он работает только один раз нажав на вкладки снова он не работает вот мой код: и это ссылка, где я хочу разместить свой аккордеон.

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

Мне нужно сделать что-то вроде простой вертикальной карусели. На hover и scroll мне нужно прокрутить внутренний ul к следующему или предыдущему элементу li (это зависит от направления прокрутки).

Я пытаюсь научиться реагировать. Давая ему идти, я экспериментировал с реагировать-Bootstrap и пытался внедрить аккордеон с использованием реагируют-загрузки аккордеон. Сначала я попробовал.

Я использую флажок в заголовке элемента управления аккордеоном в bootstrap, но модель будет обновляться только при первом нажатии на нее. Вот тебе HTML для аккордеона:
Bootstrap аккордеон не работает с локальным источником

Я использую Bootstrap 3.3.5 и разместил его локально. При предоставлении расширений

Bootstrap 4 — горизонтально выровненный аккордеон

Я искал способ построить аккордеон в Bootstrap 4 , который расположит каждую панель слева направо, а не сверху вниз. Кроме того, я пытаюсь найти решение, которое будет поворачивать кликабельные.

Я пытаюсь создать аккордеон/панель с expand/collapse. все данные из модели печатаются правильно, единственная проблема, которую я получаю, это то, что свернуть/развернуть работу для первого.

Я читал много постов о переключении значка, и у меня есть какой-то код для работы, но он работает только для одного элемента, а у меня их 23. По сути, это аккордеон FAQ, и когда вы нажимаете на.

Источник