Используя основной пример, взятый со страницы примеров Javascript Bootstrap 3 для Collapse , я смог показать состояние свертывания с помощью значков шеврона.
У меня это работает, используя:
$('#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");
});Это работает (не полностью протестировано во всех браузерах), но мне интересно, есть ли более элегантное решение для этого?
В идеале я бы хотел использовать основную функцию, но я не уверен, как добиться с ней тех же результатов.
$('#accordion').on('hidden.bs.collapse', function () {
//do something...
})Вот рабочая версия в jsfiddle .
jquery
css
twitter-bootstrap
twitter-bootstrap-3
Райан Скотт
источник
источник
Ответы:
Для следующего HTML (из примеров Bootstrap 3 ):
Визуальный эффект:
источник
Вы можете использовать такой код:
=> Рабочий JsFiddle
источник
$('#accordion').on('hidden.bs.collapse shown.bs.collapse', toggleChevron);$('#accordion').on('hide.bs.collapse show.bs.collapse', toggleChevron);вместо этогоЧтобы улучшить ответ с наибольшей популярностью, некоторые из вас, возможно, заметили при начальной загрузке страницы, что все шевроны указывают в одном направлении. Это исправляется добавлением класса «свернутый» к элементам, которые вы хотите загрузить в свернутом виде.
Вот рабочая скрипка: http://jsfiddle.net/3gYa3/585/
источник
Улучшение ответа Bludream:
Вы определенно можете использовать FontAwesome!
Не забудьте включить "свернутый" вместе с классом "заголовок панели". «Свернутый» класс не включается до тех пор, пока вы не нажмете на панель, поэтому вы хотите включить «свернутый» класс, чтобы отобразить правильный шеврон (т. Е. Шеврон-право отображается при свертывании и шеврон-вниз при открытии).
HTML
CSS
Кроме того, рекомендуется создавать новый класс вместо использования существующего.
См., Например, Codepen: http://codepen.io/anon/pen/PPxOJX
источник
Спасибо biggates и steakpi. В качестве ответа на вопрос Dreamonic я внес небольшие изменения, чтобы сделать все заголовки интерактивными (не только строку заголовка и глифы), и убрал подчеркивание со ссылки. Чтобы значки отображались в одной строке, я добавил h4 в конце инструкций CSS. Вот модифицированный код:
И модифицированный CSS:
источник
Вот пара чистых вспомогательных классов css, которые позволяют вам обрабатывать любой тип переключаемого контента прямо в вашем html.
Он работает с любым элементом, который вам нужно переключить. Каким бы ни был ваш макет, вы просто помещаете его в пару элементов с классами .if-collapsed и .if-not-collapsed внутри элемента toggle.
Единственная загвоздка в том, что вы должны убедиться, что вы установили желаемое начальное состояние переключателя. Если он изначально закрыт, установите на переключатель свернутый класс.
Также требуется селектор : not , он не работает в IE8.
Пример HTML:
Меньшая версия:
Версия CSS:
источник
Я знаю, что это устарело, но, поскольку сейчас 2018, я подумал, что отвечу, чтобы улучшить его, упростив код и улучшив взаимодействие с пользователем, заставив шеврон вращаться в зависимости от того, свернуто или нет. Однако я использую FontAwesome. Вот CSS:
Вот HTML-код раздела панели:
Я использую bootstraps pull-right, чтобы тянуть шеврон до упора вправо от заголовка панели, который должен быть во всю ширину и реагировать. CSS выполняет всю работу по анимации и вращает шеврон в зависимости от того, свернута панель или нет. Просто.
источник
рабочий простой пример
введите простой
HTML :
JavaScript
источник
или ... вы можете просто использовать такой стиль.
http://codepen.io/anon/pen/GJjrQN
источник
Я использую отличный шрифт ! и хотел, чтобы панель была разборной
и CSS
источник
Angular, похоже, вызывает проблемы с подходами на основе JavaScript (по крайней мере, теми, которые я пробовал). Я нашел это решение здесь: http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang . Суть его в том, чтобы использовать
data-ng-clickкнопку переключения и создать метод для изменения кнопки в контроллере с использованием$scopeконтекста.Думаю, я мог бы предоставить более подробную информацию ... мои кнопки настроены на глификон начального состояния div, в котором они схлопываются (glyphicon-chevron-right == collapsed div).
page.html:
controllers.js:
источник
Один лайнер.
В этом примере он используется для группировки строк сворачиваемой таблицы. Единственное, что вам нужно сделать, это добавить имя целевого класса (my-collapse-name) к вашему значку:
Вы можете сделать то же самое с собственным классом каретки Bootstrap, используя
<span class='caret my-collapse-name'></span>иspan.caret.collapse.in { transform: rotate(90deg); }источник
Если вы пытаетесь использовать это только с панелями (не с Accordeon), попробуйте этот код:
источник
Мне нужен был чистый html-подход, так как я хотел свернуть и развернуть html, который был добавлен на лету через шаблон! Я придумал это ...
https://jsfiddle.net/3mguht2y/1/
Что может быть кому-то полезно :)
источник