В аккордеоне Bootstrap вместо того, чтобы требовать щелчка по a
тексту, я хочу, чтобы он сворачивался при щелчке в любом месте panel-heading
элемента div.
Я использую Bootstrap 3. Так что вместо гармошки это просто складная панель. Есть идеи, как сделать всю панель кликабельной?
Ответы:
Все, что вам нужно сделать, это использовать ...
data-toggle="collapse"
data-target="#ElementToExpandOnClick"
... на элемент, который вы хотите щелкнуть, чтобы вызвать эффект свертывания / расширения.
Элемент with
data-toggle="collapse"
будет элементом для запуска эффекта.data-target
Атрибут указывает элемент , который будет расширяться , когда эффект срабатывает.При желании вы можете установить
data-parent
, хотите ли вы создать эффект аккордеона вместо независимого складного, например:data-parent="#accordion"
Я также добавил бы следующий CSS к элементам,
data-toggle="collapse"
если они не являются<a>
тегами, например:Вот jsfiddle с измененным html из документации Bootstrap 3 .
источник
role="tab button"
и браузер будет интерпретировать первый в списке, который он понимает (скорее всегоtab
). Хотя я не уверен, какой из двух лучше. Постарайтесь найти значение ролейtab
иbutton
ролей, и это даст вам ответ, какой из них выбрать.Другой способ -
<a>
заполнить все пространствоpanel-heading
. Используйте этот стиль для этого:Проверьте это демо ( http://jsfiddle.net/KbQyx/ ).
Затем, нажимая на заголовок, вы фактически нажимаете на
<a>
.источник
Я заметил несколько незначительных недостатков в jsfiddle Грим.
Чтобы заставить указатель перейти на руку для всей панели, используйте:
Я удалил
<a>
тег (а вопрос стиля) и хранитсяdata-toggle="collapse" data-parent="#accordion" data-target="#collapse..."
наpanel-heading
протяжении всего .Я добавил метод CSS для отображения шеврона, используя
font-awesome.css
в моем jsfiddle:http://jsfiddle.net/weaversnap/7FqsX/1/
источник
panel-heading
на,panel-heading collapsed
чтобы исправить перевернутые шевроны.Вот решение для Bootstrap4. Вам просто нужно поместить
card-header
класс вa
тег. Это изменение по сравнению с примером в W3Schools .источник
Простым решением было бы удалить отступы
.panel-heading
и добавить в.panel-title a
.Это решение похоже на вышеупомянутое Calfzhou , немного отличается.
источник
На самом деле моя панель имела этот коллапс состояния значок стрелки , и я пробовал другие ответы на этот пост, но позиция изменилась иконка, так вот решение с Распад состояния значок стрелки .
Добавить этот пользовательский CSS
Кредит идет на этот пост ответчик.
Надежда помогает.
источник
Вот рабочий пример для Bootstrap 4.3
источник