jQuery 如何在引导手风琴中添加加减符号

How to add plus minus symbol to a bootstrap accordion

提问by Leroy Mikenzi

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 init highlights that anchor . But currently all the anchor are highlighted.

我使用引导手风琴，其中第一个面板始终打开，打开的面板在. 我从我的jQuery代码检查，看看如果类包含类在它强调了锚。但目前所有的锚点都被突出显示。

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

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

here is the fiddle : Fiddle

这是小提琴：小提琴

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.

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

采纳答案by Arun P Johny

Try the show event of collapse- bootstrap 3+

尝试崩溃的显示事件- 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');
    })
});

then

然后

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

Demo: Fiddle

演示：小提琴

---

---

In your code

在你的代码中

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

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

filter() 方法返回一个 jQuery 对象，因此它始终是真实的，而且无论是否处于活动状态，您都将类添加到标题中的所有锚元素，并且在更改手风琴时也不会更改它

回答by Kender

Made a slight modification to the @Arun P Johny answer from above

对上面的@Arun P Johny 的回答进行了轻微修改

First: Changed the <i>to a <span>tag, per Bootstrap 3 documantation

第一：根据 Bootstrap 3 文档，将更改<i>为<span>标签

Second: added a second event check for users closing an open tab, removing the class and changing the minus icon to a plus icon

第二：为用户关闭打开的选项卡添加了第二个事件检查，删除类并将减号图标更改为加号图标

Fiddle

小提琴

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');
});

回答by Lightningsoul

Working example!You can add the standard class collapsed to all tabs and then just use CSS like this:

工作实例！您可以将折叠的标准类添加到所有选项卡，然后像这样使用 CSS：

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

Where .subnav-button is your desired button class and using standard bootstrap icons. Content of plus will then be replaced by the content of minus whenever the class collapsed does not lie on your button (which is exactly whenever the tab is not collapsed).

其中 .subnav-button 是您想要的按钮类并使用标准引导程序图标。每当折叠的类不在您的按钮上时（这正是选项卡未折叠时），加号的内容将被减号的内容替换。

This is the HTML code at the beginning:

这是开头的 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>

The only downside to this is that you can not use the plus icon in a collapsed tab again without it changing to a minus, too. If you want that you could of course copy the class to a new one like this:

唯一的缺点是您不能再次使用折叠选项卡中的加号图标，除非它也更改为减号。如果您愿意，您当然可以将课程复制到一个新课程，如下所示：

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

And changing the CSS at the start of my post to the new class instead and then using the new class in the HTML code of your accordion instead of just glyphicon-plus.

并将我文章开头的 CSS 改为新类，然后在手风琴的 HTML 代码中使用新类，而不仅仅是 glyphicon-plus。

回答by nav

If you want to change plus/minus class on collapsing same panel than you can use javascript in this way(Also work on multiple panel)

如果您想在折叠同一面板时更改加号/减号类，则可以以这种方式使用 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>

It is working for this html block

它适用于这个 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>

check this jsFiddle example http://jsfiddle.net/navjottomer/8u57u/4/

检查这个 jsFiddle 示例http://jsfiddle.net/navjotomer/8u57u/4/

回答by Sahib Khan

This is my css

这是我的css

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

This is my button

这是我的按钮

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

And this is my the whole accordion html with the above button

这是我带有上述按钮的整个手风琴 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>

Somebody Answered it the same way but neither people voted him nor he ended well with the quote that it has downside. I don't know what downside he was talking about. But I thought instead of editing that one lets add a neat answer though I up voted him. I suggest there should not be need for javascript coding for this. Because it can easily be done with css and html so why to litter your page.?

有人以同样的方式回答了它，但没有人投票给他，他也没有用它有缺点的引用结束。我不知道他说的是什么缺点。但是我认为与其编辑，不如添加一个简洁的答案，尽管我对他投了赞成票。我建议不需要为此进行 javascript 编码。因为它可以很容易地用 css 和 html 完成，所以为什么要乱扔你的页面。？

回答by ClarksonDev

I was able to accomplish this with a couple lines of html and css.

我能够用几行 html 和 css 来完成这个。

a.collapsed > span.expandedIndicator, a:not(.collapsed) > span.collpasedIndicator {
  display: none;
}

<span class="collapsedIndicator">+</span>
<span class="expandedIndicator">-</span>

Simply put the span tags into your HTML where you want the plus or minus to be, and then add the css rule to your stylesheet. If using bootstrap 3 or earlier, you can use glyphicons instead of the plain text plus and minus I used. This seems like the simplest solution.

只需将 span 标签放入 HTML 中您希望加号或减号所在的位置，然后将 css 规则添加到样式表中。如果使用 bootstrap 3 或更早版本，您可以使用字形代替我使用的纯文本加减号。这似乎是最简单的解决方案。

回答by Ivijan Stefan Stipi?

Ok this need new answer because Twitter Bootstrap and jQuery change many things and you need automatization:

好的，这需要新的答案，因为 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);

This nicely work with Twitter Bootstrap version 3.x and jQuery 1.10.3 and all rest above.

这很好地适用于 Twitter Bootstrap 3.x 版和 jQuery 1.10.3 以及以上所有其他版本。

回答by LOTUSMS

Adding a background color to the :active list will give you a differentiation you are looking for but if you really want a button, bootstrap uses glyphicons. This is what I did to mine and it looks good

向 :active 列表添加背景颜色会给你一个你正在寻找的差异化，但如果你真的想要一个按钮，引导程序使用字形。这是我对我做的，看起来不错

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

回答by christian Nguyen

Yes, just another answer but in my case it will work if you have or not have data-parent which help to archive just one open and all lefts is close.

是的，只是另一个答案，但在我的情况下，如果您有或没有数据父级，它会起作用，它有助于仅存档一个打开且所有左侧都关闭。

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