Як змусити згортання гармошки Bootstrap при натисканні на заголовок div?

167

У гармошці Bootstrap замість того, щоб вимагати натискання на aтекст, я хочу змусити його згортатись, коли клацніть де-небудь у розділі panel-heading.

Я використовую Bootstrap 3. Отже, замість акордеона - це просто розбірне панно. Будь-яка ідея, як зробити всю панель, яку можна натискати?

twitter-bootstrap  twitter-bootstrap-3 
— 9blue
джерело
Ну ти отримав відповідь. Але це посилання допоможе вам знайти різні стилі меню Bootstrap Accordion дизайнериlib.com
— bootstrap-accordion-

Відповіді:

292

Все, що вам потрібно зробити, це використовувати ...

  • 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 .

— похмурий
джерело
11
Схоже, це має бути код за замовчуванням / демо. Набагато приємніше, ніж використання <a>.
— dbn
цей метод не працює для iphone. за відповіддю на stackoverflow.com/questions/19866172/… це має бути <a> (оскільки для цього потрібен href), щоб він був розбірним на iphone ... будь-які ідеї?
— міновський
2
@minovsky Як щодо цього оновленого JSFiddle: jsfiddle.net/Tcgyx/60 ? На жаль, у мене немає iPhone для тестування. Я оновлю свою відповідь, якщо це працює.
— похмурий
@grim дякую за скрипку! Це не завжди спрацьовує, але дозвольте більше експериментувати і з'ясувати, чи зможу я призвести до несправності надійно.
— міновський
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>.

— кальфчжоу
джерело
Ну чудове рішення для тих, хто використовує бібліотеку GWTBootstrap.
— снові
Я цього не бачив, поки не застосував подібне рішення. Зміни CSS були для мене найменш інвазивними. Я вибрав дисплей: вбудований блок, ширина: 100%, і оскільки ми використовуємо Glyphicons для наших, a: раніше має margin-left: -10px та margin-right: 10px.
— Кірк Лімохн
1
Цей метод не працює на пристроях iOS, що, як правило, є головним питанням роботи з Bootstrap.
— Джаред
Джареде, ти можеш докладно? Чому ця робота не обмежується лише певними версіями Safari?
— Доктор Ян-Філіп Геркк
1
Перевага цього методу полягає в тому, що він також працює для інтерфейсу Boostrap для AngularJS (де ви не хочете / не потребуєте JS Bootstrap).
— Доктор Ян-Філіп Геркк
12

Я помітив декілька незначних недоліків у Ґрімді.

Щоб заставити покажчик змінити руку на всю панель, використовуйте:

.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
джерело
Це майже працює. Шеврони з’являються догори ногами, коли сторінка завантажується та виправляється після розгортання та згортання однієї з панелей.
— Connie DeCinko
@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>
Розгорніть фрагмент

— користувач2233706
джерело
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;
 }

Кредит переходить до цієї посади, що відповідає.

Надія допомагає.

— шайют
джерело
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.