如何向引导手风琴添加加减符号 [英] How to add plus minus symbol to a bootstrap accordion

问题描述

我使用引导手风琴，其中第一个面板始终打开，打开的面板获得一个 in 类.我正在检查我的 jquery 代码以查看该类是否包含类 in 它突出显示了该 anchor .但目前所有锚点都突出显示.

I using a bootstrap accordion, where the first panel is always open and the panel which is open gets a class in . I'm checking from my jquery code to see if the class contains class in it highlights that anchor . But currently all the anchor are highlighted.

我只是想让第一个锚点突出显示，即打开的和其余关闭的面板应该有一些不同的风格.

I just want the first anchor to get highlighted that is open and rest closed panel should have some different style.

这是小提琴:小提琴

如您所见，所有锚标记都突出显示.我想要第一个锚点来获得一些不同的样式.整个想法是在手风琴上添加加号/减号.

As you can see all the anchor tags are highlighted. I want first anchor to get some different styling. The whole idea is to add plus / minus symbol to the accordion.

推荐答案

试试collapse的show event - 引导程序 3+

Try the show event of collapse - 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 对象，因此它始终是真实的，而且您将类添加到标题中的所有锚元素，无论它是否处于活动状态，而且您不会在手风琴时更改它改变了

The filter() method returns a jQuery object so it sill always be truthy, also you are adding the class to all anchor elements in the title irrespective of whether it is active or not, also you are not changing it when the accordion is changed

这篇关于如何向引导手风琴添加加减符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！