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

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

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

Ответ 1

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

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;
}

Здесь jsfiddle с измененным html из Документация Bootstrap 3.

Ответ 2

Другой способ - сделать ваш <a> заполненным все пространство panel-heading. Используйте этот стиль для этого:

.panel-title a {
    display: block;
    padding: 10px 15px;
    margin: -10px -15px;
}

Проверьте это демо (http://jsfiddle.net/KbQyx/).

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

Ответ 3

Я заметил пару незначительных недостатков в мрачной jsfiddle.

Чтобы получить указатель на изменение руки для всей панели, используйте:

.panel-heading {
   cursor: pointer;
}

Я удалил тег <a> (проблема стиля) и сохранил data-toggle="collapse" data-parent="#accordion" data-target="#collapse..." на panel-heading.

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

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

Ответ 4

Простым решением было бы удалить дополнение из .panel-heading и добавить к .panel-title a.

.panel-heading {
    padding: 0;
}
.panel-title a {
    display: block;
    padding: 10px 15px;
}

Это решение аналогично приведенному выше calfzhou, немного отличающееся.

Ответ 5

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

Добавьте этот пользовательский CSS

 .panel-heading 
  {
   cursor: pointer;
   padding: 0;
  }

 a.accordion-toggle 
 {
  display: block;
  padding: 10px  15px;
 }

Кредит отправляется this после ответа.

Надежда помогает.

Ответ 6

Здесь решение для Bootstrap4. Вам просто нужно положить card-header класса в a тега. Это изменение по сравнению с примером в W3Schools.

<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'; return false;" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div id="accordion">
    <div class="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseOne" >
        Collapsible Group Item #1
      </a>
      <div id="collapseOne" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <a class="collapsed card-link card-header" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseThree">
        Collapsible Group Item #3
      </a>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
  </div>
</div>