Jak sprawić, by akordeon Bootstrap zwinął się po kliknięciu nagłówka div?

167

W akordeonie Bootstrap, zamiast wymagać kliknięcia atekstu, chcę, aby zwijał się po kliknięciu w dowolnym miejscu elementu panel-headingdiv.

Używam Bootstrap 3. Zamiast akordeonu jest to po prostu składany panel. Masz pomysł, jak zrobić cały panel klikalny?

twitter-bootstrap  twitter-bootstrap-3 
— 9niebieski
źródło
Cóż, masz odpowiedź. Ale ten link pomoże ci znaleźć różne style menu akordeonu Bootstrap designerslib.com/bootstrap-accordion-menu
— Karuppiah RK

Odpowiedzi:

292

Wystarczy, że użyjesz ...

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

... na elemencie, który chcesz kliknąć, aby wywołać efekt zwijania / rozwijania.

Element z data-toggle="collapse"będzie elementem wywołującym efekt. data-targetAtrybut wskazuje na element, który będzie rozszerzać, gdy efekt jest wyzwalany.

Opcjonalnie możesz ustawić, data-parentjeśli chcesz stworzyć efekt akordeonu zamiast niezależnego zwijania, np:

  • data-parent="#accordion"

Dodałbym również następujący CSS do elementów z, data-toggle="collapse"jeśli nie są one <a>tagami, np .:

.panel-heading {
    cursor: pointer;
}

Oto plik jsfiddle ze zmodyfikowanym kodem HTML z dokumentacji Bootstrap 3 .

— ponury
źródło
11
Wygląda na to, że powinien to być kod domyślny / demonstracyjny. O wiele przyjemniejsze niż używanie <a>.
— dbn
ta metoda nie działa na iPhonie. zgodnie z odpowiedzią na stackoverflow.com/questions/19866172/ ... musi być <a> (ponieważ wymaga href), aby można go było zwijać na iPhonie ... jakieś pomysły?
— minovsky
2
@minovsky A co z tym zaktualizowanym JSFiddle: jsfiddle.net/Tcgyx/60 ? Niestety nie mam iPhone'a do przetestowania. Zaktualizuję odpowiedź, jeśli to zadziała.
— ponury
@grim dzięki za skrzypce! Nie zawsze to działa, ale pozwól mi więcej eksperymentować i dowiedzieć się, czy potrafię niezawodnie spowodować awarię.
— minovsky
1
@wutzebaer Mógłbyś mieć, role="tab button"a przeglądarka zinterpretuje pierwszy z listy, którą rozumie (najprawdopodobniej tab). Chociaż nie jestem pewien, który z nich jest lepszy. Postaraj się znaleźć sens tabi buttonról i że daje odpowiedź na pytanie, co wybrać.
— ponury
67

Innym sposobem jest <a>pełne wypełnienie całej przestrzeni panel-heading. Użyj tego stylu, aby to zrobić:

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

Sprawdź to demo ( http://jsfiddle.net/KbQyx/ ).

Następnie, kiedy klikasz nagłówek, faktycznie klikasz plik <a>.

— calfzhou
źródło
Ach świetne rozwiązanie dla tych z nas, którzy korzystają z biblioteki GWTBootstrap.
— śnieżny
Nie widziałem tego, dopóki nie wdrożyłem podobnego rozwiązania. Zmiany CSS były dla mnie najmniej inwazyjną zmianą. Wybrałem display: inline-block, width: 100%, a ponieważ używamy Glificons do naszego, a: before ma margin-left: -10px i margin-right: 10px.
— Kirk Liemohn,
1
Ta metoda nie działa na urządzeniach z systemem iOS, co jest zwykle głównym problemem podczas pracy z Bootstrap.
— Jared
Jared, czy możesz to rozwinąć? Dlaczego to nie działa, czy to jest ograniczone do niektórych wersji Safari?
— Dr Jan-Philip Gehrcke
1
Zaletą tej metody jest to, że działa ona również dla interfejsu Boostrap dla AngularJS (gdzie nie chcesz / potrzebujesz JS Bootstrap).
— Dr Jan-Philip Gehrcke
12

Zauważyłem kilka drobnych błędów w pliku jsfiddle grima.

Aby wskaźnik zmienił się w dłoń dla całego panelu, użyj:

.panel-heading {
   cursor: pointer;
}

Usunąłem <a>tag (problem ze stylem) i kontynuowałem data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."przez panel-headingcały czas.

Dodałem metodę CSS do wyświetlania szewronu, używając font-awesome.cssw moim jsfiddle:

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

— WeaverSnap
źródło
To prawie działa. Szewrony pojawiają się do góry nogami po załadowaniu strony i poprawiają się po rozwinięciu i zwinięciu jednego z paneli.
— Connie DeCinko
@ConnieDeCinko Zmień panel-headingna, panel-heading collapsedaby naprawić odwrócone szewrony.
— Amy Barrett
5

Oto rozwiązanie dla Bootstrap4. Musisz tylko umieścić card-headerklasę w atagu. To jest zmodyfikowane z przykładu w 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>
Rozwiń fragment

— user2233706
źródło
4

Prostym rozwiązaniem byłoby usunięcie wypełnienia z .panel-headingi dodanie do .panel-title a.

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

To rozwiązanie jest podobne do powyższego, które opublikował calfzhou , nieco inne.

— Rhythm Ruparelia
źródło
1

Właściwie mój panel miał tę ikonę strzałki stanu zwinięcia i próbowałem innych odpowiedzi w tym poście, ale pozycja ikony uległa zmianie, więc oto rozwiązanie z ikoną strzałki stanu zwinięcia .

Dodaj ten niestandardowy CSS

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

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

Kredyt trafia do osoby odpowiadającej na ten post.

Nadzieja pomaga.

— shaijut
źródło
0

Oto przykład roboczy dla 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>
Rozwiń fragment

— Deweloper
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.