Меню

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

Почему мой аккордеон Bootstrap не работает должным образом?

Я создаю сайт с помощью Bootstrap 4, и у меня есть 3

Мой код здесь. (Нажмите кнопки «Sobre Paygol», «Vendedores» и «Compradores»).

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

popper.min.js.map:1 Uncaught SyntaxError: Unexpected token ‘:’

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

Мои скрипты загружаются как таковые:

Обратите внимание, что во второй строке я добавил файл popper.min.js.map , который я скачал с Github.

2 ответа

Я не думаю, что ваши проблемы как-то связаны с ошибкой исходной карты. У вас есть несколько ошибок в вашем HTML:

  1. Неверный родительский ID
  2. Дополнительный класс .hide, который предотвращает отображение складных
  3. Несколько элементов с одинаковым идентификатором, например #accordion

На странице http://18.230.62.117/support.html#faqAboutPaygol вы ошиблись родительские идентификаторы в вашем HTML.

См. Идентификатор вашего аккордеона «accordionQuestions», но ваш data-parent=»#accordion» .

На странице http://18.230.62.117/support.html#faqVendedores у вас есть дополнительный .hide класс на первом сворачиваемом элементе:

Вот почему первый складной элемент не откроется даже при нажатии на него.

Также обратите внимание, поскольку вы делаете одностраничное приложение, у вас не может быть нескольких элементов с одним и тем же идентификатором, например,

Источник

Сворачиваемое

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

Как это работает

Плагин JavaScript сворачивания используется для отображения и скрытия содержимого. Кнопки или якоря используются как триггеры, которые сопоставляются с определенными элементами, которые Вы переключаете. Сворачивание элемента приведет к анимации height от текущего значения до 0 . Учитывая, как CSS обрабатывает анимацию, Вы не можете использовать padding для элемента .collapse . Вместо этого используйте класс как независимый элемент оболочки.

Пример

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

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

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

Ссылка с атрибутом href Кнопка с атрибутом data-target

Несколько целей

Переключить первый элемент Переключить второй элемент Переключить оба элемента

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

Используя компонент карточки, Вы можете расширить стандартное поведение сворачивания для создания аккордеона. Чтобы правильно добиться стиля аккордеона, обязательно используйте .accordion в качестве оболочки.

Сворачиваемый групповой элемент #1

Сворачиваемый групповой элемент #2

Сворачиваемый групповой элемент #3

Доступность

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

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

Читайте также:  Не работает термопот поларис причины

Обратите внимание, что текущая реализация Bootstrap не охватывает различные взаимодействия с клавиатурой, описанные в WAI-ARIA Authoring Practices 1.1 паттерн аккордеона — Вам нужно будет включить их самостоятельно в собственный JavaScript.

Применение

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

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

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

Через атрибуты данных

Просто добавьте к элементу data-toggle=»collapse» и data-target , чтобы автоматически назначить управление одним или несколькими сворачиваемыми элементами. Атрибут data-target принимает CSS-селектор, к которому нужно применить сворачивание. Обязательно добавьте к сворачиваемому элементу класс 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’)

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

.collapse(‘show’)

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

.collapse(‘hide’)

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

.collapse(‘dispose’)

Уничтожает вышеуказанный сворачиваемый элемент.

События

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

Источник

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

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

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

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

2 ответа

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

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

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

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

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

и jQuery импорт в дополнение ко всему этому

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

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

Оформление заказа : демо

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

мой bootstrap 2.3 аккордеон не работает должным образом он работает только один раз нажав на вкладки снова он не работает вот мой код: и это ссылка, где я хочу разместить свой аккордеон http://etekstudio.org/demo/crateen/test-featured

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

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

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

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

  • Развернуть/свернуть работает только для первого элемента

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

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

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

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

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

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

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

    Источник

    Bootstrap Accordion Expand / Collapse Все не работает должным образом

    Вот процесс, чтобы сломать это:

    1. нажмите Музыка
    2. нажмите Развернуть / Свернуть все
    3. нажмите Музыка
    4. нажмите Развернуть / Свернуть все
    5. нажмите Развернуть / Свернуть все снова

    Обратите внимание, что Music Notation НЕ будет открываться снова, хотя вы должны видеть в функции, что логика говорит, что ВСЕ панели закрыты и должны открываться. ЗАЧЕМ? Что я делаю не так?

    2 ответа

    Проблема заключается в том, что состояние всех панелей отличается от состояния любой отдельной панели из-за того, как аккордеон работает с data-parent . Ваш обработчик кнопки «Развернуть / свернуть все» должен полностью переопределить это нормальное поведение аккордеона.

    Обработчик развертывания всех кликов должен отслеживать последнее состояние (развернуть все или свернуть все ), потому что компонент Bootstrap Collapse отдельно обрабатывает состояние каждой отдельной панели (только одно открытое одновременно). В противном случае невозможно было бы узнать, открывать или закрывать отдельные переключаемые панели.

    OFC, другой способ — просто удалить атрибуты data-parent= и полностью отключить поведение аккордеона.

    Если вы можете позволить удалить атрибут data-parent data-parent=»#accordionFormat» из всех элементов, где он существует, это решит вашу проблему.

    Зачем? Я не уверен, но кажется, что атрибут запускает некоторую логику, которая путается с функциональностью свертывания.

    Источник

    Компоненты

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

    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.

    Источник

  • Adblock
    detector