Как добавить символ плюс минус в аккордеон bootstrap

Я использую аккордеон bootstrap, где первая панель всегда открыта, а открытая панель получает класс на . Я проверяю из своего кода jquery, чтобы узнать, содержит ли класс class на он подчеркивает этот якорь . Но в настоящее время все якоря выделены.

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

вот скрипка : Скрипка

Как вы можете видеть, все теги привязки выделены. Я хочу, чтобы first anchor получил другой стиль. Вся идея состоит в том, чтобы добавить символ плюс / минус к аккордеону.

9
css html jquery twitter-bootstrap-3

9 ответов

попробуйте показать события коллапс - bootstrap 3+

jQuery(function ($) {
    var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
    $active.find('a').prepend('<i class="glyphicon glyphicon-minus"></i>');
    $('#accordion .panel-heading').not($active).find('a').prepend('<i class="glyphicon glyphicon-plus"></i>');
    $('#accordion').on('show.bs.collapse', function (e) {
        $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
        $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    })
});

затем

.panel-heading.active {
    background-color: green;
}

демо: Скрипка

в коде

$(document).ready(function () {
    if ($('div').filter(':not(in)')) {
        $('.panel-title a').addClass('active');
    }
});

метод filter () возвращает объект jQuery, поэтому он всегда будет правдивым, также вы добавляете класс ко всем элементам привязки в заголовке независимо от того, активен он или нет, Также вы не меняете его при изменении аккордеона

7

внес небольшое изменение в ответ @Arun P Johny сверху

первый на <i> до <span> тег, за Бутстрап 3 documantation

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

Скрипка

var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
$active.find('a').append('<span class="glyphicon glyphicon-minus pull-right"></span>');
$('#accordion .panel-heading').not($active).find('a').prepend('<span class="glyphicon glyphicon-plus pull-right"></span>');
$('#accordion').on('show.bs.collapse', function (e)
{
    $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
});
$('#accordion').on('hide.bs.collapse', function (e)
{
    $(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
});
8

Если вы хотите изменить плюс / минус класс при сворачивании одной панели, чем вы можете использовать javascript таким образом (также работать на нескольких панелях)

<script>
var selectIds =$('#collapse1,#collapse2,#collapse3');
    $(function ($) {
    selectIds.on('show.bs.collapse hidden.bs.collapse', function () {
        $(this).prev().find('.fa').toggleClass('fa-plus fa-minus');
    })
});
</script>

он работает для этого блока html

<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="#panel1"><i class="glyphicon glyphicon-minus"></i>Panel 1</a>
            </h4>
        </div>
    <div id="panel1" class="panel-collapse collapse in">
        <div class="panel-body">
            Contents panel 1
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="glyphicon glyphicon-plus"></i>Panel 2</a>
            </h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 2
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="glyphicon glyphicon-plus"></i>Panel 3</a>
            </h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 3
            </div>
        </div>
    </div>
</div>

проверьте этот пример jsFiddlehttp://jsfiddle.net/navjottomer/8u57u/4/

6

рабочий пример! Вы можете добавить стандартный класс, свернутый на все вкладки, а затем просто использовать CSS следующим образом:

.subnav-button .glyphicon-plus:before {
    content: "12";
}
.collapsed .glyphicon-plus:before {
    content:  "b";
}

где .subnav-кнопка нужную кнопку Класс и используя стандартный Bootstrap иконки. Содержимое плюса будет заменено содержимым минуса всякий раз, когда класс свернут не лежит на вашей кнопке (что именно тогда, когда вкладка не свернута).

- Это HTML-код в начало:

<button data-toggle="collapse" class="subnav-button collapsed" data-target="#subnav-110">
  <li class="renoi-first-floor">
    Sitemap&nbsp;
    <span class="glyphicon glyphicon-plus subnav-icon" aria-hidden="true"></span>
  </li>
</button>

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

.glyphicon-accordion-plus-minus < .glyphicon-plus

и изменение CSS в начале моего сообщения на новый класс вместо этого, а затем использование нового класса в HTML-коде вашего аккордеона вместо просто glyphicon-plus.

6

Это мой css

.my-button.collapse-nav-button:before {
    content: "12";
}
.collapsed .my-button.collapse-nav-button:before {
    content:  "b";
}

Это моя кнопка

<span class="my-button collapse-nav-button"></span>

и это мой весь аккордеон html с вышеуказанной кнопкой

<div class="panel panel-default" ng-repeat="list in table_models">
 <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapse1">
    <h1 class="panel-title">
        <span class="my-button collapse-nav-button"></span>
        <a data-toggle="collapse" data-target="#colapse1" href="#">Open/Close</a>       
    </h1>
 </div>
 <div class="panel-collapse collapse fade" id="collapse1">
    <div class="panel-body">
    <!--Accordion body -->
   </div>
 </div>
</div>

кто-то ответил ему таким же образом, но ни люди проголосовали за него, ни он не закончил хорошо с цитатой, что у нее есть обратная сторона. Я не знаю, о каком недостатке он говорил. Но я думал вместо редактирования, что можно добавить аккуратный ответ, хотя я проголосовал за него. Я предлагаю, что не должно быть необходимости в кодировании javascript для этого. Потому что это можно легко сделать с помощью css и html, поэтому зачем засорять вашу страницу.?

2

я смог выполнить это с помощью нескольких строк html и css.

a.collapsed > span.expandedIndicator, a:not(.collapsed) > span.collpasedIndicator {
  display: none;
}
<span class="collapsedIndicator">+</span>
<span class="expandedIndicator">-</span>

просто поместите теги span в HTML, где вы хотите, чтобы плюс или минус был, а затем добавьте правило css в таблицу стилей. Если с помощью Bootstrap 3 или более ранней версии, вы можете использовать технологии glyphicons вместо обычного текста плюс и минус я. Это кажется самым простым решением.

1

добавление цвета фона в список: active даст вам дифференциацию, которую вы ищете, но если вы действительно хотите кнопку, bootstrap использует глификоны. Это то, что я сделал с моим, и это выглядит хорошо

<button type="button" class="btn btn-green"><span class="glyphicon glyphicon-plus"></span> Add Close Day</button>
0

да, просто еще один ответ, но в моем случае он будет работать, если у вас есть или нет data-parent, которые помогают архивировать только один открытый, и все левые близки.

    <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 data-toggle="collapse" href=".collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <i class="glyphicon glyphicon-minus"></i>
                        Collapsible Group Item #1
                    </a>
                </h4>
            </div>
            <div  class="panel-collapse collapse in collapseOne" 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 class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" href=".collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <i class="glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #2
                    </a>
                </h4>
            </div>
            <div class="panel-collapse collapse collapseTwo" role="tabpanel" aria-labelledby="headingTwo">
                <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" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse"  href=".collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <i class="glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #3
                    </a>
                </h4>
            </div>
            <div class="panel-collapse collapse collapseThree" role="tabpanel" aria-labelledby="headingThree">
                <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>
    <script>
        jQuery(function ($) {
            $('[data-toggle="collapse"]').on('click', function() {
                var $this = $(this),
                        $parent = typeof $this.data('parent')!== 'undefined' ? $($this.data('parent')) : undefined;
                if($parent === undefined) { /* Just toggle my  */
                    $this.find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
                    return true;
                }

                /* Open element will be close if parent !== undefined */
                var currentIcon = $this.find('.glyphicon');
                currentIcon.toggleClass('glyphicon-plus glyphicon-minus');
                $parent.find('.glyphicon').not(currentIcon).removeClass('glyphicon-minus').addClass('glyphicon-plus');

            });
        });
    </script>
0

Ok это нужен новый ответ, потому что Twitter Bootstrap и jQuery меняют многие вещи, и вам нужна автоматизация:

(function($) {
    $(document).ready(function(){
        if($(".collapse.in").length)
        {
            $(".collapse.in").prev().find(".panel-title a").append('<span class="glyphicon glyphicon-chevron-down pull-left"></span> ');
        }
        else
        {
            $(".collapse").prev().find(".panel-title a").append('<span class="glyphicon glyphicon-chevron-right pull-left"></span> ');
        }
        $('.panel-collapse').on({
            'hidden.bs.collapse' : function (e) {
                var active = $(this).prev().find(".panel-title a .glyphicon");
                active.removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right");
            },
            'show.bs.collapse' : function (e) {
                var active = $(this).prev().find(".panel-title a .glyphicon");
                active.removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
            }
        });
    });    
})(jQuery);

это хорошо работает с Twitter Bootstrap версии 3.x и jQuery 1.10.3 и все остальное выше.

0