如何在bootstrap手风琴上加上减号 [英] How to add plus minus symbol to a bootstrap accordion

问题描述

我使用自举手风琴，其中第一个面板始终打开，打开的面板在 in 中有一个类。我从我的jquery代码检查，看看该类是否包含 类中突出显示的锚点。但目前所有的锚点都突出显示。

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

这里是小提琴：小提琴

正如你可以看到所有的锚标签都突出显示。我想要第一个锚点得到一些不同的造型。

尝试 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'）。 .find（'a'）。prepend（'< i class =glyphicon glyphicon-plus>< / i>'）; 
 $（'＃accordion'）。on .collapse'，function（e）{
 $（'＃accordion .panel-heading.active'）。removeClass（'active'）。find（'。glyphicon'）。toggleClass（'glyphicon-plus glyphicon-减去'）; 
 $（e.target）.prev（）。addClass（'active'）。find（'glyphicon'）。toggleClass（'glyphicon-plus glyphicon-minus'）; 
 }）
}）; 
  

然后

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

演示：小提琴

---

$ b

  $（document）.ready（function（）{
 if（$（'div'）。 '））{
 $（'。panel-title a'）。addClass（'active'）; 
} 
} 
  

filter（）方法返回一个jQuery对象，所以它总是真实的，类别到标题中的所有锚点元素，而不管它是否活动，当手风琴发生变化时也不会改变它

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.

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.

解决方案

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

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

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