W akordeonie Bootstrap, zamiast wymagać kliknięcia a
tekstu, chcę, aby zwijał się po kliknięciu w dowolnym miejscu elementu panel-heading
div.
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
źródło
Odpowiedzi:
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-target
Atrybut wskazuje na element, który będzie rozszerzać, gdy efekt jest wyzwalany.Opcjonalnie możesz ustawić,
data-parent
jeś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 .:Oto plik jsfiddle ze zmodyfikowanym kodem HTML z dokumentacji Bootstrap 3 .
źródło
role="tab button"
a przeglądarka zinterpretuje pierwszy z listy, którą rozumie (najprawdopodobniejtab
). Chociaż nie jestem pewien, który z nich jest lepszy. Postaraj się znaleźć senstab
ibutton
ról i że daje odpowiedź na pytanie, co wybrać.Innym sposobem jest
<a>
pełne wypełnienie całej przestrzenipanel-heading
. Użyj tego stylu, aby to zrobić:Sprawdź to demo ( http://jsfiddle.net/KbQyx/ ).
Następnie, kiedy klikasz nagłówek, faktycznie klikasz plik
<a>
.źródło
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:
Usunąłem
<a>
tag (problem ze stylem) i kontynuowałemdata-toggle="collapse" data-parent="#accordion" data-target="#collapse..."
przezpanel-heading
cały czas.Dodałem metodę CSS do wyświetlania szewronu, używając
font-awesome.css
w moim jsfiddle:http://jsfiddle.net/weaversnap/7FqsX/1/
źródło
panel-heading
na,panel-heading collapsed
aby naprawić odwrócone szewrony.Oto rozwiązanie dla Bootstrap4. Musisz tylko umieścić
card-header
klasę wa
tagu. To jest zmodyfikowane z przykładu w W3Schools .źródło
Prostym rozwiązaniem byłoby usunięcie wypełnienia z
.panel-heading
i dodanie do.panel-title a
.To rozwiązanie jest podobne do powyższego, które opublikował calfzhou , nieco inne.
źródło
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
Kredyt trafia do osoby odpowiadającej na ten post.
Nadzieja pomaga.
źródło
Oto przykład roboczy dla Bootstrap 4.3
źródło