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

167

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

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

twitter-bootstrap  twitter-bootstrap-3 
— 9blue
источник
Ну, вы получили ответ. Но эта ссылка поможет вам найти различные стили Аккордеонных Меню Bootstrap designerlib.com/bootstrap-accordion-menu
— Karuppiah RK

Ответы:

292

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

  • data-toggle="collapse"
  • data-target="#ElementToExpandOnClick"

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

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

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

  • data-parent="#accordion"

Я также добавил бы следующий CSS к элементам, data-toggle="collapse"если они не являются <a>тегами, например:

.panel-heading {
    cursor: pointer;
}

Вот jsfiddle с измененным html из документации Bootstrap 3 .

— мрачный
источник
11
Похоже, это должно быть по умолчанию / демонстрационный код. Гораздо приятнее, чем с помощью <a>.
— д.б.н.
этот метод не работает для iphone. согласно ответу на stackoverflow.com/questions/19866172/… он должен быть <a> (поскольку для него требуется href), чтобы его можно было складывать на iphone ... есть идеи?
— Миновский
2
@minovsky Как насчет этого обновленного JSFiddle: jsfiddle.net/Tcgyx/60 ? К сожалению, у меня нет iPhone для тестирования. Я обновлю свой ответ, если это сработает.
— мрачное
@ грим спасибо за скрипку! Это не всегда работает, но позвольте мне больше поэкспериментировать и выяснить, смогу ли я надежно произвести ошибку.
— миновский
1
@wutzebaer Вы можете иметь, role="tab button"и браузер будет интерпретировать первый в списке, который он понимает (скорее всего tab). Хотя я не уверен, какой из двух лучше. Постарайтесь найти значение ролей tabи buttonролей, и это даст вам ответ, какой из них выбрать.
— мрачно
67

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

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

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

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

— calfzhou
источник
Отличное решение для тех из нас, кто использует библиотеку GWTBootstrap.
— Снег
Я не видел этого, пока не реализовал подобное решение. Изменения CSS были наименее инвазивным изменением для меня. Я выбрал display: inline-block, width: 100%, и поскольку мы используем глифы для нашего, a: before имеет margin-left: -10px и margin-right: 10px.
— Кирк Лаймон
1
Этот метод не работает на устройствах iOS, что обычно является основной проблемой при работе с Bootstrap.
— Джаред
Джаред, можешь уточнить? Почему это не работает, это ограничено определенными версиями Safari?
— Доктор Ян-Филипп Герке
1
Преимущество этого метода заключается в том, что он также работает для Boostrap UI для AngularJS (где вы не хотите / не нуждаетесь в JS Bootstrap).
— Доктор Ян-Филипп Герке
12

Я заметил несколько незначительных недостатков в 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/

— WeaverSnap
источник
Это почти работает. Шевроны появляются вверх ногами, когда страница загружается и исправляются после развертывания и свертывания одной из панелей.
— Конни ДеСинко
@ConnieDeCinko Измените panel-headingна, panel-heading collapsedчтобы исправить перевернутые шевроны.
— Эми Барретт
5

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 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>
Развернуть фрагмент

— user2233706
источник
4

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

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

Это решение похоже на вышеупомянутое Calfzhou , немного отличается.

— Ритм Рупарелия
источник
1

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

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

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

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

Кредит идет на этот пост ответчик.

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

— shaijut
источник
0

Вот рабочий пример для Bootstrap 4.3 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="accordion" id="accordionExample">
                <div class="card">
                    <div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <h2 class="mb-0">
                            <button class="btn btn-link" type="button" >
                                Collapsible Group Item #1
                            </button>
                        </h2>
                    </div>

                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #2
                            </button>
                        </h2>
                    </div>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #3
                            </button>
                        </h2>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
            </div>
Развернуть фрагмент

— разработчик
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.