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

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

尝试显示崩溃事件 - 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/navjotomer/8u57u/4/

Answer 4

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

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

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

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

Answer 5

这是我的css

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

这是我的按钮

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

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

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

Answer 6

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

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

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

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

Answer 7

演示https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=accordion-with-plus-minus-icon

 $(document).ready(function(){ // Add minus icon for collapse element which is open by default $(".collapse.show").each(function(){ $(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus"); }); // Toggle plus minus icon on show hide of collapse element $(".collapse").on('show.bs.collapse', function(){ $(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus"); }).on('hide.bs.collapse', function(){ $(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus"); }); });

 .bs-example{ margin: 20px; } .accordion .fa{ margin-right: 0.5rem; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <style> </style> <div class="bs-example"> <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus"></i> What is HTML?</button> </h2> </div> <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p> </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"><i class="fa fa-plus"></i> What is Bootstrap?</button> </h2> </div> <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p> </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree"><i class="fa fa-plus"></i> What is CSS?</button> </h2> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p> </div> </div> </div> </div> </div>

Answer 8

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

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

Answer 9

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

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

Answer 10

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

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