如何在bootstrap手风琴中添加加减号

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.

我使用的是一个自举手风琴,第一个面板总是打开,面板打开了。我正在检查我的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.

如您所见,所有锚标记都会突出显示。我想要第一个锚来获得一些不同的造型。整个想法是为手风琴添加加/减符号。

9 个解决方案

#1

Try the show event of collapse - bootstrap 3+

尝试崩溃的show事件 - 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对象,因此它总是很简单,你也可以将类添加到标题中的所有锚元素,无论它是否处于活动状态,当你更改手风琴时你也不会改变它

#2

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文档,将更改为标记

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

#3

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/navjottomer/8u57u/4/

#4

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: "\2212";
}
.collapsed .glyphicon-plus:before {
    content:  "\2b";
}

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是您所需的按钮类并使用标准引导程序图标。只要折叠的类不在您的按钮上(这正是标签未折叠的时候),则plus的内容将被减去的内容替换。

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。

#5

This is my css

这是我的CSS

.my-button.collapse-nav-button:before {
    content: "\2212";
}
.collapsed .my-button.collapse-nav-button:before {
    content:  "\2b";
}

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完成,所以为什么要乱丢你的页面。

#6

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或更早版本,则可以使用glyphicons而不是我使用的纯文本加减。这似乎是最简单的解决方案。

#7

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

将背景颜色添加到:活动列表将为您提供所需的区别,但如果您确实需要按钮,则引导程序使用glyphicons。这就是我对我做的事情,看起来不错

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

#8

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>

#9

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以及其他所有内容完美配合。