【问题标题】:How to add plus minus symbol to a bootstrap accordion如何向引导手风琴添加加减号
【发布时间】:2014-04-10 03:32:40
【问题描述】:

我使用引导手风琴,其中第一个面板始终打开,打开的面板获得一个类 in 。我正在从我的 jquery 代码中检查该类是否包含 class in 它突出显示了该 anchor 。但目前所有的锚点都高亮显示。

我只想突出显示打开的第一个锚点,而其余关闭的面板应该有一些不同的样式。

这里是小提琴:Fiddle

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

【问题讨论】:

  • 面板在你的小提琴中不起作用?

标签: jquery html css twitter-bootstrap-3


【解决方案1】:

对上面的@Arun P Johny 答案做了一些修改

首先:根据 Bootstrap 3 文档,将 <i> 更改为 <span> 标记

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

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

【讨论】:

  • 嗨@Kender,如何处理嵌套的手风琴?例如。 #手风琴1和#手风琴2?我试过你的代码,它非常适合单手风琴,但在嵌套时失败了。谢谢
  • 它应该就像给你的第二个手风琴一个新的id(而不是#accordion)一样简单,每个手风琴都将被单独处理。我需要查看您的代码以了解它在哪里失败
  • 几乎明白了。扩展子手风琴2和父手风琴1时仍然影响glyphicon手风琴1的问题在其子手风琴处于扩展模式时无法正确切换jsfiddle.net/4t1qs0uv/2
【解决方案2】:

试试collapse的show event - 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;
}

演示:Fiddle


在您的代码中

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

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

【讨论】:

  • 对你的回答 jQuery 做了一点修改,下面看我的回答
【解决方案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/

【讨论】:

    【解决方案4】:

    Working example! 您可以将折叠的标准类添加到所有选项卡,然后像这样使用 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。

    【讨论】:

    • 我不知道你所说的缺点是什么意思。它是问题的正确答案。其他人使用 Javascript 这不是一个好主意,因为这是 css 问题,应该用 css 解决
    • 嗯,是的。但是,如果您在文本元素(或任何不应扩展或收缩手风琴的元素)中使用 + 图标,您将遇到麻烦。但这可以通过使用另一个类轻松解决。
    【解决方案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 完成,所以为什么要乱扔你的页面。?

    【讨论】:

    • 为什么没有人得到我解释的小缺点?如果您在标签内容中使用 + 图标,它也将变为减号。因此,假设您将 + 图标添加到所有链接,那么它不仅会更改用于展开选项卡的按钮,还会更改选项卡内容中的所有链接。这就对了。这是一个需要考虑的次要因素,我只是想在任何人想知道之前弄清楚这一点。人们应该开始更多地支持我解释一个可能发生的超级小问题,而不是吓坏它。 :D
    • 添加更具体的类可以轻松解决这个问题。我改变了答案
    【解决方案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 或更早版本,您可以使用 glyphicons 而不是我使用的纯文本加减号。这似乎是最简单的解决方案。

    【讨论】:

    • 这是最简单的方法!
    • 不,不是。我的解决方案就是 CSS。这是 HTML 和 CSS,它在很大程度上取决于您的网站上有多少折叠元素,就您必须投入的工作而言,才能使用它。 ;)
    【解决方案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>

    【讨论】:

      【解决方案8】:

      为 :active 列表添加背景颜色会给你一个你正在寻找的差异化,但如果你真的想要一个按钮,bootstrap 使用 glyphicons。这是我对我的做的,看起来不错

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

      【讨论】:

        【解决方案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>
        

        【讨论】:

          【解决方案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 以及以上所有版本一起使用。

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2018-04-05
            • 1970-01-01
            相关资源
            最近更新 更多