Twitter Bootstrap надає класи для переключення вмісту, див. Https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less .
Я абсолютно новачок у jQuery, і прочитавши їхні документи, я прийшов до іншого рішення поєднати Twitter Bootstrap + jQuery.
По-перше, рішенням "приховати" та "показати" елемент (клас wsis-згортання) при натисканні на інший елемент (клас wsis-toggle) - використовувати .toggle .
jQuery(document).ready(function() {
jQuery(".wsis-toggle").click(function(){
jQuery(".wsis-collapse").toggle();
});
});
Ви вже приховали елемент .wsis-collapse
за допомогою класу Twitter Bootstrap (V3) .hidden
також:
.hidden {
display: none !important;
visibility: hidden !important;
}
При натисканні на .wsis-toggle
jQuery додається стиль вбудованого тексту:
display: block
Через те, що !important
в Twitter Bootstrap цей стиль вбудованої форми не впливає, тому нам потрібно видалити .hidden
клас, але я не рекомендую .removeClass
цього робити ! Тому що, коли jQuery збирається щось приховати ще раз, він також додає стиль вбудованого тексту:
display: none
Це не те саме, що .hidden клас Twitter Bootstrap, який оптимізований і для AT (зчитувачі екрану). Отже, якщо ми хочемо показати прихований дів, нам потрібно позбутися .hidden
класу Twitter Bootstrap, тому ми позбудемося важливих тверджень, але якщо ми приховатимемо його знову, ми хочемо .hidden
повернути клас ще раз! Для цього ми можемо використовувати [.toggleClass] [3].
jQuery(document).ready(function() {
jQuery(".wsis-toggle").click(function(){
jQuery(".wsis-collapse").toggle().toggleClass( "hidden" );
});
});
Таким чином ви продовжуєте використовувати прихований клас кожен раз, коли вміст приховано.
.show
Клас ТБ фактично такий же , як вбудований стиль в JQuery, як 'display: block'
. Але якщо .show
клас у якийсь момент буде іншим, то ви просто також додасте цей клас:
jQuery(document).ready(function() {
jQuery(".wsis-toggle").click(function(){
jQuery(".wsis-collapse").toggle().toggleClass( "hidden show" );
});
});