Bootstrap Collapse Accordion - Domyślnie Rozwiń / Zwiń?
Używam Twitter Bootstrap z jQuery.
Zgodnie z dokumentami bootstrap, jeśli chcesz, aby zwijany element był otwarty jako domyślny, dodaj dodatkową klasę „in”. A jeśli chcesz, aby zwijany element zwinął się domyślnie, stylizujesz wysokość na 0px.
To wszystko działa dobrze i dobrze.
Chciałbym użyć Media Query, aby ustawić element otwarty jako domyślny na dużych ekranach i zwinąć jako domyślny na małych ekranach (a następnie kliknąć, aby włączyć oba) ...
Mój HTML:
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="accordion-heading">
Heading text.
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
(Click to show/hide)
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum.
</div>
</div>
</div>
</div>
Mój CSS:
@media (min-width: 768px) {
.collapse {
height: auto;
}
}
@media (max-width: 767px) {
.collapse {
height: 0px;
}
}
Działa to dobrze, dopóki nie klikniesz…
Poniżej 767px element jest zwinięty domyślnie, a powyżej elementu jest domyślnie otwarty. Poprawny.
Poniżej 767px możesz kliknąć, aby otworzyć element, i otwiera się dobrze. Kliknij ponownie i ukryje się. Wypłukać i powtórzyć. Poprawny.
Powyżej 767px po kliknięciu, aby zwinąć element, zamyka się, a następnie ponownie otwiera. Kliknij go ponownie, a zamknie się i tym razem pozostanie zamknięte. Kliknij ponownie i otworzy się dobrze. Kliknij ponownie i zamknie się dobrze.
Więc z jakiegoś powodu powyżej 767px (gdy element jest otwarty domyślnie), potrzeba dwóch kliknięć, aby pozostać zwiniętym bez ponownego otwarcia się, a następnie działa poprawnie.
Myśli?