Я установил эту простую версию Bootstrap аккордеон:
Простой аккордеон: http://jsfiddle.net/darrenc/cngPS/
В настоящее время значок указывает только вниз, но кто-нибудь знает, что нужно для выполнения JS, чтобы изменить класс значка на:
<i class="icon-chevron-up"></i>
... так что он вверх указывает расширенный и снова переключается на вниз, когда свертывается, и так четвертый?
Вот он ответ для тех, кто ищет решение в Bootstrap 3 (например, я).
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
<span class="glyphicon glyphicon-minus"></span>
</button>
</div>
<div id="demo" class="collapse in">Some dummy text in here.</div>
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
Вот мой подход к Bootstrap 2.x. Это всего лишь css. Нет необходимости в JavaScript:
.accordion-caret .accordion-toggle:hover {
text-decoration: none;
}
.accordion-caret .accordion-toggle:hover span,
.accordion-caret .accordion-toggle:hover strong {
text-decoration: underline;
}
.accordion-caret .accordion-toggle:before {
font-size: 25px;
vertical-align: -3px;
}
.accordion-caret .accordion-toggle:not(.collapsed):before {
content: "▾";
margin-right: 0px;
}
.accordion-caret .accordion-toggle.collapsed:before {
content: "▸";
margin-right: 0px;
}
Просто добавьте class accordion-caret в div группы аккордеона, например:
<div class="accordion-group accordion-caret">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
<strong>Header</strong>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Content
</div>
</div>
</div>
В Bootstrap Collapse есть некоторые события, на которые вы можете реагировать:
$(document).ready(function(){
$('#accordProfile').on('shown', function () {
$(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
});
$('#accordProfile').on('hidden', function () {
$(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
});
});
Использовать псевдоселектор CSSes: после использования встроенных Glyphicons Bootstrap 3 для отсутствия ответа JS с незначительной модификацией вашего HTML...
CSS
.panel-heading [data-toggle="collapse"]:after
{
font-family: 'Glyphicons Halflings';
content: "\e072"; /* "play" icon */
float: right;
color: #b0c5d8;
font-size: 18px;
line-height: 22px;
/* rotate "play" icon from > (right arrow) to down arrow */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.panel-heading [data-toggle="collapse"].collapsed:after
{
/* rotate "play" icon from > (right arrow) to ^ (up arrow) */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
HTML
Добавьте class="collapsed" к любым якорным тегам, которые по умолчанию закрыты.
Это приведет к появлению якорей, таких как
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
в
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Пример использования CodePen Live
http://codepen.io/anon/pen/VYobER
Скриншот
Добавлен в @muffls ответ, так что это работает со всеми крахами бутстрапа twitter и вносит изменения в стрелку до начала анимации.
$('.collapse').on('show', function(){
$(this).parent().find(".icon-chevron-left").removeClass("icon-chevron-left").addClass("icon-chevron-down");
}).on('hide', function(){
$(this).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-left");
});
В зависимости от вашей структуры HTML вам может потребоваться изменить parent().
Я думаю, что лучшие коды:
$('#accordion1').collapse({
toggle: false
}).on('show',function (e) {
$(e.target).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
}).on('hide', function (e) {
$(e.target).parent().find(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
});
Если кому-то интересно, так вы делаете это с BS3, так как они изменили имена событий:
$('.collapse').on('show.bs.collapse', function(){
var i = $(this).parent().find('i')
i.toggleClass('fa-caret-right fa-caret-down');
}).on('hide.bs.collapse', function(){
var i = $(this).parent().find('i')
i.toggleClass('fa-caret-down fa-caret-right');
});
Вы просто меняете имена классов в примере на те, которые вы используете в своем случае.
Вот мое решение, которое далее уточняется из одного, отправленного @john-magnolia и решает некоторые из его проблем.
/**
* Toggle on/off arrow for Twitter Bootstrap collapsibles.
*
* Multi-collapsible-friendly; supports several collapsibles in the same group, on the same page.
*/
function animateCollapsibles() {
$('.collapse').on('show', function() {
var $t = $(this);
var header = $("a[href='#" + $t.attr("id") + "']");
header.find(".icon-chevron-right").removeClass("icon-chevron-right").addClass("icon-chevron-down");
}).on('hide', function(){
var $t = $(this);
var header = $("a[href='#" + $t.attr("id") + "']");
header.find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-right");
});
}
И вот пример разметки:
<div class="accordion" id="accordion-send">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
<i class="icon icon-chevron-right"></i> Send notice
</a>
</div>
<div id="collapse-refund" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum Toholampi city</p>
</div>
</div>
</div>
</div>
Решение bootstrap v3 (где события имеют разные имена), также используя только один селектор jQuery (как показано здесь):
$('.accordion').on('hide.bs.collapse show.bs.collapse', function (n) {
$(n.target).siblings('.panel-heading').find('i.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});
Наиболее читаемым решением только для CSS, вероятно, будет использование атрибута, расширенного в арии. Помните, что вам нужно добавить aria-extended = "false" ко всем элементам collapse, поскольку это не задано при загрузке (только при первом щелчке).
<h2 data-toggle="collapse" href="#collapseId" aria-expanded="false">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="glyphicon glyphicon-chevron-down"></span> Title
</h2>
h2[aria-expanded="false"] span.glyphicon-chevron-down,
h2[aria-expanded="true"] span.glyphicon-chevron-right
{
display: none;
}
h2[aria-expanded="true"] span.glyphicon-chevron-down,
h2[aria-expanded="false"] span.glyphicon-chevron-right
{
display: inline;
}
Работает с Bootstrap 3.x.
Вот как я делаю это без js.
Я использовал значок glyphicon-triangle-right, но он работает с любым другим значком, что он делает, так это то, что он на 90 градусов вращается к значку, когда панель открыта или нет. Я использую Bootstrap 3.3.5 для этого.
Код CSS
h4.panel-title a {
display: block;
}
h4.panel-title a.collapsed .glyphicon-triangle-right {
color: #ada9a9 !important;
transform: rotate(0deg);
}
h4.panel-title a .glyphicon-triangle-right {
color: #515e64 !important;
transform: rotate(90deg);
}
Это структура HTML, взятая из примера Bootstrap
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Proven Expertise
<span class="glyphicon glyphicon-triangle-right pull-right" aria-hidden="true"></span>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<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(el) {
if ($(el).find('i').hasClass('icon-chevron-left'))
$(el).find('.icon-chevron-left').removeClass("icon-chevron-left").addClass("icon-chevron-down");
else
$(el).find('.icon-chevron-down').removeClass("icon-chevron-down").addClass("icon-chevron-left");
}
Реализация HTML:
<div class="accordion" id="accordion-send">
<div class="accordion-group">
<div class="accordion-heading" onClick="toggleChevron(this)">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
<i class="icon icon-chevron-right"></i> Send notice
</a>
...
@RobSadler:
RE Мартин Викман CSS только версия...
Вы можете обойти эту проблему, поместив аккордеонный тэг на тег привязки и присвоив ему свернутый класс по умолчанию. Например:
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle accordion-caret collapsed" data-toggle="collapse" href="#collapseOne">
<strong>Header</strong>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Content
</div>
</div>
Это сработало для меня.
Для Bootstrup 3.2 + FontAwesome
$(document).ready(function(){
$('#accordProfile').on('shown.bs.collapse', function () {
$(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
});
$('#accordProfile').on('hidden.bs.collapse', function () {
$(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
});
});
Иногда вам приходится писать так. Если так
$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
Автоматически сгенерированный (class= "рухнул" ), когда вы нажимаете меню скрыть.
ps, когда вам нужно создать меню дерева
На это ответили многочисленные способы, но то, что я придумал, было самым простым и легким для меня с Bootstrap 3 и шрифтом. Я просто сделал
$('a.toggler').on('click', function () {$('i', this).toggleClass('fa-caret-up');});
Это просто переключает класс CSS значка, который я хочу показать. Я добавляю класс toggler к элементу, к которому я хочу применить это. Это можно добавить к любому элементу, который вы хотите переключить значок.
Другое решение без javascript, в котором используется сама функция коллапса:
/* Prevent block display and transition animation */
.expand-icon.collapse.in,
.collapse-icon.collapse.in {
display: inline; }
.expand-icon.collapsing {
display: none; }
/* HTML Toggler with glyphicons */
<a data-toggle="collapse" href=".my-collapse">
<span class="my-collapse collapse-icon collapse in">
<span class="glyphicon glyphicon-collapse-up"></span>
</span>
<span class="my-collapse expand-icon collapse">
<span class="glyphicon glyphicon-expand"></span>
</span>
</a>
Для решения только для CSS (и без значков) с использованием Bootstrap 3 мне пришлось немного поиграть на основе ответа Мартина Викмана выше.
Я не использовал обозначения аккордеона *, потому что это делалось с панелями в BS3.
Кроме того, мне пришлось включить в начальный HTML aria-extended = "true" элемент, который открывается при загрузке страницы.
Вот CSS, который я использовал.
.accordion-toggle:hover { text-decoration: none; }
.accordion-toggle:hover span, .accordion-toggle:hover strong { text-decoration: underline; }
.accordion-toggle:before { font-size: 25px; }
.accordion-toggle[data-toggle="collapse"]:before { content: "+"; margin-right: 0px; }
.accordion-toggle[aria-expanded="true"]:before { content: "-"; margin-right: 0px; }
Вот мой дезинфицированный HTML:
<div id="acc1">
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent="#acc1" href="#acc1-1">Title 1
</a>
</span>
</div>
<div id="acc1-1" class="panel-collapse collapse in">
<div class="panel-body">
Text 1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#acc1" href="#acc1-2">Title 2
</a>
</span>
</div>
<div id="acc1-2" class="panel-collapse collapse">
<div class="panel-body">
Text 2
</div>
</div>
</div>
</div>
Кратчайший ответ.
HTML
<a data-toggle="collapse" data-parent="#panel-quote-group" href="#collapseQuote">
<span class="toggle-icon glyphicon glyphicon-collapse-up"></span>
</a>
JS:
<script type="text/javascript">
$(function () {
$('a[data-toggle="collapse"]').click(function () {
$(this).find('span.toggle-icon').toggleClass('glyphicon-collapse-up glyphicon-collapse-down');
})
})
</script>
И, конечно, вы можете использовать что угодно для селектора вместо привязки тега a и вы также можете использовать специальный селектор вместо this если ваш значок находится за пределами элемента, по которому вы щелкнули.