Korzystając z podstawowego przykładu zaczerpniętego ze strony przykładów JavaScript Bootstrap 3 dla Collapse , udało mi się pokazać stan zwinięcia za pomocą ikon jodełek.
Mam to działające przy użyciu:
$('#accordion .accordion-toggle').click(function (e) {
var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
$("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});
To działa (nie w pełni przetestowane we wszystkich przeglądarkach), ale zastanawiam się, czy istnieje bardziej eleganckie rozwiązanie tego problemu?
Idealnie chciałbym użyć funkcji core, ale nie jestem pewien, jak osiągnąć z nią takie same wyniki.
$('#accordion').on('hidden.bs.collapse', function () {
//do something...
})
Oto działająca wersja w jsfiddle .
jquery
css
twitter-bootstrap
twitter-bootstrap-3
Ryan Scott
źródło
źródło
Odpowiedzi:
Dla następującego kodu HTML (z przykładów Bootstrap 3 ):
Efekt wizualny:
źródło
Możesz użyć tego rodzaju kodu:
=> Działające JsFiddle
źródło
$('#accordion').on('hidden.bs.collapse shown.bs.collapse', toggleChevron);
$('#accordion').on('hide.bs.collapse show.bs.collapse', toggleChevron);
zamiast tegoAby poprawić odpowiedź z największą liczbą poprawek, niektórzy z was mogli zauważyć podczas początkowego ładowania strony, że wszystkie szewrony wskazują ten sam kierunek. Problem ten można rozwiązać, dodając klasę „zwinięta” do elementów, które mają zostać załadowane zwinięte.
Oto działające skrzypce: http://jsfiddle.net/3gYa3/585/
źródło
Poprawa odpowiedzi Bludream:
Zdecydowanie możesz użyć FontAwesome!
Pamiętaj, aby dodać klasę „zwinięty” do klasy „panel-header”. Klasa „zwinięta” jest dołączana dopiero po kliknięciu panelu, więc chcesz dołączyć klasę „zwiniętą”, aby wyświetlić prawidłową szewron (tj. Szewron po prawej stronie jest wyświetlany po zwinięciu, a szewron w dół po otwarciu).
HTML
CSS
Ponadto dobrą praktyką jest tworzenie nowej klasy zamiast korzystania z istniejącej.
Zobacz na przykład Codepen: http://codepen.io/anon/pen/PPxOJX
źródło
Dzięki biggates i steakpi. W odpowiedzi na pytanie Dreamonic, dokonałem niewielkich zmian, aby wszystkie nagłówki były klikalne (nie tylko ciąg tytułu i gluphs) i usunąłem podkreślenie z linku. Aby wymusić pojawienie się ikon w tej samej linii, dodałem h4 na końcu instrukcji CSS. Oto zmodyfikowany kod:
Oraz zmodyfikowany CSS:
źródło
Oto kilka czystych klas pomocniczych css, które umożliwiają obsługę dowolnego rodzaju przełączania zawartości bezpośrednio w html.
Działa z każdym elementem, który musisz zmienić. Niezależnie od układu, po prostu umieszczasz go w kilku elementach z klasami .if-collapsed i .if-not-collapsed w elemencie toggle.
Jedynym haczykiem jest to, że musisz upewnić się, że ustawiłeś pożądany początkowy stan przełącznika. Jeśli jest początkowo zamknięty, umieść zwiniętą klasę na przełączniku.
Wymaga również : not selector, nie działa na IE8.
Przykład HTML:
Mniej wersji:
Wersja CSS:
źródło
Wiem, że to jest stare, ale ponieważ jest teraz 2018, pomyślałem, że odpowiem, poprawiając go, upraszczając kod i poprawiając wrażenia użytkownika, obracając szewron na podstawie zwinięcia lub nie. Jednak używam FontAwesome. Oto CSS:
Oto kod HTML sekcji panelu:
Używam pasków bootstraps w prawo, aby pociągnąć jodełkę do końca na prawo od nagłówka panelu, który powinien być na pełnej szerokości i responsywny. CSS wykonuje całą animację i obraca szewron w zależności od tego, czy panel jest zwinięty, czy nie. Prosty.
źródło
działający prosty przykład
wprowadź proste
HTML :
JavaScript
źródło
lub ... możesz po prostu nadać taki styl.
http://codepen.io/anon/pen/GJjrQN
źródło
Używam niesamowitej czcionki ! i chciałem, aby panel był składany
i css
źródło
Wydaje się, że Angular powoduje problemy z podejściem opartym na JavaScript (przynajmniej te, które wypróbowałem). Znalazłem to rozwiązanie tutaj: http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang . Istotą tego jest użycie
data-ng-click
przycisku przełącznika i wykonanie metody zmiany przycisku w kontrolerze za pomocą$scope
kontekstu.Myślę, że mógłbym podać więcej szczegółów ... moje przyciski są ustawione na glifik stanu początkowego elementu div, który zwijają (glyphicon-chevron-right == collapsed div).
page.html:
controllers.js:
źródło
Jednowierszowy.
W tym przykładzie jest używany do grupowania zwijanych wierszy tabeli. Jedyne, co musisz zrobić, to dodać nazwę klasy docelowej (my-collapse-name) do swojej ikony:
Możesz osiągnąć to samo z rodzimą klasą karetki Bootstrap, używając
<span class='caret my-collapse-name'></span>
ispan.caret.collapse.in { transform: rotate(90deg); }
źródło
Jeśli próbujesz użyć tego tylko z panelami (nie akordeon), wypróbuj ten kod:
źródło
Zależało mi na czystym podejściu html, ponieważ chciałem zwinąć i rozwinąć kod HTML, który był dodawany w locie za pośrednictwem szablonu! Wymyśliłem to ...
https://jsfiddle.net/3mguht2y/1/
Co może się komuś przydać :)
źródło