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

Question

我使用引导手风琴,其中,第一板始终是敞开的,并且是开放获取的一类面板在.我从我的jQuery代码检查,看看如果类包含类在它强调了锚.但目前所有锚点都突出显示.

我只是希望第一个锚点突出显示是打开的,休息关闭面板应该有一些不同的风格.

这是小提琴:小提琴

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

Answer 1

对上面的@Arun P Johny答案略作修改

第一:根据Bootstrap 3文档更改<i>为<span>标记

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

小提琴

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

Answer 2

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

然后

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

演示:小提琴

在你的代码中

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

filter()方法返回一个jQuery对象,因此它总是很简单,你也可以将类添加到标题中的所有锚元素而不管它是否处于活动状态,当你更改手风琴时你也不会改变它

Answer 3

如果你想在折叠同一个面板上更改加/减类,那么你可以用这种方式使用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>

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

Answer 4

工作范例! 您可以将折叠的标准类添加到所有选项卡,然后只使用这样的CSS:

.subnav-button .glyphicon-plus:before {
    content: "\2212";
}
.collapsed .glyphicon-plus:before {
    content:  "\2b";
}

其中.subnav-button是您所需的按钮类,并使用标准的引导程序图标.只要折叠的类不在您的按钮上(这正是标签未折叠的时候),则plus的内容将被减去的内容替换.

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