Bootstrap 3 Свернуть показать состояние с иконкой Chevron
Используя основной пример, взятый со страницы примеров 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.
14 ответов
Для следующего HTML (из примеров Bootstrap 3):
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: grey; /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript" ></script>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>Визуальный эффект:
Вы можете использовать этот вид кода:
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find('i.indicator')
.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
=> Рабочая JsFiddle
Чтобы улучшить ответ с наибольшим количеством замечаний, некоторые из вас, возможно, заметили при начальной загрузке страницы, что все шевроны указывают в одном направлении. Это исправляется добавлением класса "свернутый" к элементам, которые вы хотите загрузить свернутым.
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
Вот рабочая скрипка: http://jsfiddle.net/3gYa3/585/
Улучшение ответа Bludream:
Вы можете определенно использовать FontAwesome!
Убедитесь, что вы включили "свернутый" вместе с "заголовком панели". Класс "свернутый" не включается до тех пор, пока вы не нажмете на панель, поэтому вы хотите включить класс "свернутый", чтобы отобразить правильный шеврон (т. Е. Правый шеврон отображается при свертывании и шеврон вниз при открытом).
HTML
<div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOrderItems1">Products 1 <i class="chevron fa fa-fw" ></i></div>
<div class="collapse" id="collapseOrderItems1">
<p>Lorem ipsum...</p>
</div>
</div>
CSS
.panel-heading .chevron:after {
content: "\f078";
}
.panel-heading.collapsed .chevron:after {
content: "\f054";
}
Кроме того, хорошей практикой является создание нового класса вместо использования существующего класса.
См. Codepen, например: http://codepen.io/anon/pen/PPxOJX
Благодаря Биггейтс и стейкпи. Как ответ на вопрос Dreamonic, я сделал небольшие изменения, чтобы сделать все заголовки кликабельными (не только заголовок и грифы), и убрал подчеркивание из ссылки. Чтобы заставить иконки появляться в одной строке, я добавил h4 в конце инструкций CSS. Вот модифицированный код:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<h4 class="panel-title">Collapsible Group Item #1</h4>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<h4 class="panel-title">Collapsible Group Item #2</h4>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<h4 class="panel-title">Collapsible Group Item #3</h4>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
И модифицированный CSS:
.panel-heading .accordion-toggle h4:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: grey;
overflow: no-display;
}
.panel-heading .accordion-toggle.collapsed h4:after {
/* symbol for "collapsed" panels */
content: "\e080";
}
a.accordion-toggle{
text-decoration: none;
}
Я знаю, что это старый, но так как сейчас 2018, я подумал, что отвечу, сделав его лучше, упростив код и улучшив пользовательский опыт, заставив шеврон вращаться на основе свернутого или нет. Я использую FontAwesome однако. Вот CSS:
a[data-toggle="collapse"] .rotate {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
a[data-toggle="collapse"].collapsed .rotate {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
Вот HTML-код для раздела панели:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
<i class="fa fa-chevron-right pull-right rotate"></i>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
Я использую начальную кнопку подтягивания вправо, чтобы вытянуть шеврон полностью вправо от заголовка панели, который должен быть на всю ширину и отзывчивым. CSS выполняет всю анимационную работу и вращает шеврон в зависимости от того, свернута ли панель или нет. Просто.
Вот пара чистых вспомогательных классов CSS, которые позволяют вам обрабатывать любой вид переключаемого содержимого прямо в вашем HTML.
Он работает с любым элементом, который вам нужно переключить. Независимо от того, какой у вас макет, вы просто помещаете его в пару элементов с классами.if-collapsed и.if-not-collapsed внутри элемента toggle.
Единственный улов заключается в том, что вы должны убедиться, что поставили желаемое начальное состояние переключателя. Если он изначально закрыт, поместите свернутый класс в переключатель.
Это также требует : не селектор, он не работает на IE8.
Пример HTML:
<a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseExample">
<!--You can put any valid html inside these!-->
<span class="if-collapsed">Open</span>
<span class="if-not-collapsed">Close</span>
</a>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
Меньшая версия:
[data-toggle="collapse"] {
&.collapsed .if-not-collapsed {
display: none;
}
&:not(.collapsed) .if-collapsed {
display: none;
}
}
Версия CSS:
[data-toggle="collapse"].collapsed .if-not-collapsed {
display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
display: none;
}
Работает простой пример
- получить состояние тела показано / скрыто
- добраться до родительского атрибута
- найти значок
- изменить значок
HTML:
<body>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#jai">Jai</a>
</div>
<div id="jai" class="accordion-body collapse in">
<div>
<div class="accordion-inner">body content 1</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">jai2</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div>
<div class="accordion-inner">body content 2</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse3">jai3</a>
</div>
<div id="collapse3" class="accordion-body collapse">
<div>
<div class="accordion-inner">body content 3</div>
</div>
</div>
</div>
</body>
JavaScript
$('div.accordion-body').on('shown', function () {
$(this).parent("div").find(".icon-chevron-down")
.removeClass("icon-chevron-down").addClass("icon-chevron-up");
});
$('div.accordion-body').on('hidden', function () {
$(this).parent("div").find(".icon-chevron-up")
.removeClass("icon-chevron-up").addClass("icon-chevron-down");
});
Один лайнер.
i.fa.fa-chevron-right.collapse.in { transform: rotate(180deg); }
В этом примере он используется для группировки строк складной таблицы. Единственное, что вам нужно сделать, это добавить имя целевого класса (my-collapse-name) к вашему значку:
<tr data-toggle="collapse" data-target=".my-collapse-name">
<th><i class="fa fa-chevron-right my-collapse-name"></span></th>
<th>Master Row - Title</th>
</tr>
<tr class="collapse my-collapse-name">
<td></td>
<td>Detail Row - Content</td>
</tr>
То же самое можно сделать с помощью встроенного класса Bootstrap с помощью <span class='caret my-collapse-name'></span> а также span.caret.collapse.in { transform: rotate(90deg); }
Или... вы можете просто добавить такой стиль.
.panel-title a.collapsed {
background: url(../img/arrow_right.png) center right no-repeat;
}
.panel-title a {
background: url(../img/arrow_down.png) center right no-repeat;
}
Похоже, что Angular вызывает проблемы с подходами, основанными на JavaScript (по крайней мере те, которые я пробовал) . Я нашел это решение здесь: http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang. Суть в том, чтобы использовать data-ng-click на кнопке переключения и выберите способ изменения кнопки в контроллере с помощью $scope контекст.
Я думаю, я мог бы предоставить более подробную информацию... мои кнопки установлены на глификон начального состояния div, который они свертывают ( glyphicon-chevron-right == свернутый div) .
page.html:
<div class="title-1">
<button data-toggle="collapse" data-target="#panel-{{ p_idx }}" class="dropdown-toggle title-btn glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)"></button>
</div>
<div id="panel-{{ p_idx }}" class="collapse sect">
...
</div>
controllers.js:
.controller('PageController', function($scope, $rootScope) {
$scope.collapse = function (event) {
$(event.target).toggleClass("glyphicon-chevron-down glyphicon-chevron-right");
};
)
Я использую шрифт потрясающий! и хотел, чтобы панель была разборной
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#collapseOrderItems"><i class="fa fa-chevron fa-fw" ></i> products</div>
<div class="collapse in" id="collapseOrderItems">
....
</div>
</div>
и CSS
.panel-heading .fa-chevron:after {
content: "\f078";
}
.panel-heading.collapsed .fa-chevron:after {
content: "\f054";
}
Если вы пытаетесь использовать это только с панелями (не с соответствующими), попробуйте этот код:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapse-toggle" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Panel heading with title</a>
</h4>
</div>
<div id="collapseExample" class="panel-collapse collapse in">
<div class="panel-body">
Panel content
</div>
</div>
</div>
Мне нужен был чистый подход html, так как я хотел свернуть и развернуть html, который был добавлен на лету через шаблон! Я придумал это...
https://jsfiddle.net/3mguht2y/1/
var noJavascript = ":)";
Что может быть полезно кому-то:)