Добавление значка открытия / закрытия в складные элементы Twitter Bootstrap (аккордеоны)

87

Я установил эту простую версию аккордеона Bootstrap :

Простой аккордеон: http://jsfiddle.net/darrenc/cngPS/

В настоящее время значок указывает только вниз , но знает ли кто-нибудь, какой JS потребуется реализовать, чтобы изменить класс значка на:

<i class="icon-chevron-up"></i>

... так что он указывает вверх при расширении и снова переключается вниз при свертывании, и так четвертое?

javascript jquery twitter-bootstrap Даррен
источник

Ответы:

94

Вот ответ для тех, кто ищет решение в Bootstrap 3 (как и я).

Часть HTML:

<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>

Часть js:

$('.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");
});

Пример аккордеона:

Пример загрузочного аккордеона

Андрей Веве
источник
6
именно то, что нужно для начальной загрузки 3.x. при использовании 2.x удалите .bs.collapse. Я также изменил, shown and hidden to show and hideчтобы анимация происходила до открытия аккордеона.
user1881482 09
2
это должен быть правильный ответ, потому что он работает и в версии 4
Андрес Фелипе
Как насчет вложенных аккордеонов? у дочерних элементов нет шевронов, но я все еще включаю родительский элемент.
esoteric
48

Вот мой подход к 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;
    }

Просто добавьте класс аккордеон-каретка в 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>
Мартин Викман
источник
2
Мне очень понравился такой подход Мартина. Тем более, что очень ненавязчивый.
J Castillo
4
Я обнаружил, что это работает с одним исключением - начальная вставка всегда отображается развернутой для всех разделов. Как только вы развернетесь, а затем снова свернетесь, это будет правильно.
Робб Сэдлер
8
@Robb - я включил класс «свернутый» в свой элемент «свертывание» в html, чтобы решить проблему с начальной стрелкой. Мой html немного отличается, но он, вероятно, сработает
Mark B
1
Мне тоже нравится решение css. Некоторым из моих сверстников удобнее использовать css, чем javascript, так что это было лучшее решение для моей команды. Спасибо за внимание к части инициализации. Теперь отлично работает!
Hcabnettek
42

В 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");
    });
});
Филипп Хофманн
источник
1
Маффлс, ты звезда! тоже красиво и просто, спасибо за это ;-)
Даррен
1
пожалуйста! вы также можете использовать показывать или скрывать вместо показа и скрытия. Попробуйте сами. Вы увидите, какой из них вы предпочитаете.
Филипп Хофманн
1
Привет, Маффс, есть идеи, почему это не работает на моем тестовом сайте? datascrew.co.uk/gordonedge.com
Даррен
add $ (document) .ready (... в вашем main.js я поместил приведенный выше код.
Филипп Хофманн,
8
Bootstrap3: имена событий должны иметь .bs.collapse, поэтому они включены ('hide.bs.collapse') и включены ('show.bs.collapse') или отображаются / скрыты, когда вы хотите добавить дополнительные переходы css в Это.
Langeleppel 03
21

Используйте псевдоселектор CSS: после использования встроенных 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

Снимок экрана

Как это отображается в JSBin

бафромка
источник
1
было сообщено об этой ссылке jsbin
Ник Бартлетт
2
Перенесли на CodePen. Спасибо за сообщение. Попробуйте!
bafromca,
16

Добавлен в ответ @muffls, так что это работает со всем сворачиванием бутстрапа твиттера и меняет стрелку до начала анимации.

$('.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().

Джон Магнолия
источник
1
+1 бросил его, и это сработало для меня - просто изменено, чтобы использовать значок-шеврон-право вместо левого
azcoastal
1
Этот мне подходит. Другие коды меняют класс для всех вкладок при нажатии вместо вкладки :)
виньеш
10

Я думаю, что лучшие коды следующие:

  $('#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");
      });
user2273425
источник
2
Для меня это единственное рабочее решение, остальные переключают класс всех аккордеонных групп. Ура :)
maximus ツ
6

Если кому-то интересно, вот как вы это делаете с 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');
});

Вы просто меняете имена классов в примере на те, которые вы используете в своем случае.

rbsthlm
источник
1
Спасибо b3rgstrom, оценил. Я проверю это, когда в следующий раз воспользуюсь BS3.
Даррен
1
Нет проблем, подумал, что в будущем кто-то может найти ваш вопрос с той же проблемой :)
rbsthlm
5

Наиболее читаемым решением, использующим только CSS, вероятно, будет использование атрибута aria-extended. Помните, что вам нужно добавить aria-extended = "false" ко всем элементам collapse, поскольку это не устанавливается при загрузке (только при первом щелчке).

HTML:

<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>

CSS:

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.

Андреас Бергстрём
источник
1
Это прекрасно работает. Поскольку моим тегом привязки был переключатель данных, я просто изменил h2 на a в CSS
MC9000
3

Вот мое решение, которое дополнительно доработано на основе решения, опубликованного @ 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>
Микко Охтамаа
источник
1
Хорошие люди - я чувствую себя великим идиотом, но не могу заставить работать ни одно из этих решений: -S единственное различие, о котором я могу думать, это то, что я использую новый bootstrap3 и, следовательно, получаю классы «glyphicon glyphicon-chevron-right. указатели?
benteh 09
2
Bootstrap 3 не является обратно совместимой версией. Пожалуйста, обратитесь к документации Bootstrap 3, как перенести код.
Микко Охтамаа
1
Привет, Микко, спасибо, да, я понял это и получил здесь хорошую помощь: stackoverflow.com/questions/18147338/…
benteh
3

Решение 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');
});
Geert
источник
Отличный ответ
Naveen DA
3

Вот как я это делаю без js.

Я использовал значок глификон-треугольник-вправо, но он работает с любым другим значком, он применяет поворот на 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>
General Electric
источник
У меня этот метод работает, но начальный статус повернут на 90 градусов. Не могли бы вы подсказать, как сделать начальный статус без вращения (0deg)? Благодарность!
Tsung-Ting Kuo
1
В элементах привязки добавьте class = "collapsed", чтобы избежать того, что с вами происходит
General Electric
Спасибо за ответ! Я действительно пробовал '<h4 class = "panel-title collapsed">', но безуспешно. Было бы это правильно?
Tsung-Ting Kuo
1
Он должен быть в теге привязки, потому что это то, что bootstrap js изменяется при срабатывании события onClick, проверьте на этой странице, работает с решением, о котором я упоминал acubavoy.com/preguntas-frequentes
General Electric
2

Ничего из вышеперечисленного не сработало для меня, но я придумал это, и это сработало:

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>
      ...
Джошуа Бенсон
источник
1

@RobSadler:

Только версия 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>

Это сработало для меня.

RioBrewster
источник
1

Для 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 = "collapsed") при нажатии на скрытое меню.

ps когда нужно создать древовидное меню

Попов Андрей
источник
1

На это было много ответов, но то, что я придумал, было для меня самым простым и легким с Bootstrap 3 и отличным шрифтом. я только что сделал

$('a.toggler').on('click', function () {$('i', this).toggleClass('fa-caret-up');});

Это просто переключает класс CSS значка, который я хочу показать. Я добавляю переключатель класса к элементу, к которому хочу применить это. Его можно добавить к любому элементу, для которого нужно переключить значок.

Мика Монтойя
источник
0

Еще одно решение без 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>
Себастьян Сангерваси
источник
0

Для решения только с 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>
ДжессикаФредерик
источник
0

Кратчайший ответ.

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если ваш значок находится за пределами элемента, на который вы щелкнули.

Джунаид
источник
0

Вот решение, которое создает раздел, который можно расширить, используя несколько материальный дизайн, бутстрап 4.5 / 5 альфа и полностью без javascript.

Стиль для головной части

<style>
[data-toggle="collapse"] .fa:before {
    content: "\f077";
}

[data-toggle="collapse"].collapsed .fa:before {
    content: "\f078";
}
</style>

HTML-код для тела

<div class="pt-3 pb-3" style="border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; cursor: pointer;">
<a href="#expandId" class="text-dark float-right collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">
    <i class="fa" aria-hidden="false"></i>
</a>
<a href="#expandId" class="text-dark collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">Expand Header</a>
<div class="collapse" id="expandId">
    CONTENT GOES IN HERE
</div>
Уильям Уорли
источник