Как сделать Бутстрап аккордеон свернуть при нажатии на заголовок div?

Question

Как сделать Бутстрап аккордеон свернуть при нажатии на заголовок div?

в загрузочном аккордеоне, вместо того, чтобы требовать щелчка по a текст, я хочу, чтобы он свернулся при нажатии в любом месте panel-heading div.

Я использую Bootstrap 3. Так что вместо аккордеона это просто складная панель. Есть идеи, как сделать всю панель кликабельной?

607 5

twitter-bootstrap twitter-bootstrap-3

5 ответов:

Comments

Ничего не найдено.

grim · Accepted Answer · 2015-11-08 20:17:54

все, что вам нужно сделать, это использовать...

data-toggle="collapse"

data-target="#ElementToExpandOnClick"

...на элементе, который вы хотите нажать, чтобы вызвать эффект свернуть/развернуть.

элемент data-toggle="collapse" будет элемент, чтобы вызвать эффект. Элемент data-target атрибут указывает элемент, который будет расширяться при срабатывании эффекта.

дополнительно вы можете установить data-parent если вы хотите создать эффект гармошки независимых складных, например:

data-parent="#accordion"

Я бы также добавил следующий CSS к элементам с data-toggle="collapse" если они не <a> теги, например:
.panel-heading {
    cursor: pointer;
}
вот!--30-->a jsfiddle с измененным html из Bootstrap 3 documentation.

calfzhou · Accepted Answer · 2013-11-25 11:31:29

другой способ сделать ваш <a> заполнить все пространство panel-heading. Используйте этот стиль для этого:
.panel-title a {
    display: block;
    padding: 10px 15px;
    margin: -10px -15px;
}
проверьте эту демонстрацию (http://jsfiddle.net/KbQyx/).

затем, когда вы нажимаете на заголовок, вы на самом деле нажимаете на <a>.

WeaverSnap · Accepted Answer · 2013-10-21 19:11:51

я заметил несколько незначительных недостатков в JSFiddle грима.

чтобы заставить указатель перейти на руку для всей панели используйте:
.panel-heading {
   cursor: pointer;
}
я убрал <a> тег (проблема стиля) и хранил data-toggle="collapse" data-parent="#accordion" data-target="#collapse..." on panel-heading на протяжении.

я добавил метод CSS для отображения chevron, используя font-awesome.css в моем jsfiddle:

http://jsfiddle.net/weaversnap/7FqsX/1/

Rhythm Ruparelia · Accepted Answer · 2017-05-31 05:17:00

простым решением было бы удалить прокладку из .panel-heading и добавить к .panel-title a.
.panel-heading {
    padding: 0;
}
.panel-title a {
    display: block;
    padding: 10px 15px;
}
Это решение аналогично приведенному выше, опубликованному calfzhou, несколько иной.

stom · Accepted Answer · 2017-05-23 15:02:50

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

добавить этот пользовательский CSS
 .panel-heading 
  {
   cursor: pointer;
   padding: 0;
  }

 a.accordion-toggle 
 {
  display: block;
  padding: 10px  15px;
 }
кредит идет к этой после ответа.

надеюсь поможет.