向Twitter Bootstrap可折叠项（手风琴）添加打开/关闭图标

Answers:

94

对于那些正在Bootstrap 3中寻求解决方案的人（如我自己），这就是答案。

HTML部分：

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
    <span class="glyphicon glyphicon-minus"></span>
  </button>
</div>
<div id="demo" class="collapse in">Some dummy text in here.</div>

js部分：

$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});

示例手风琴：

Bootply手风琴示例

— 安德烈·维夫（Andrei Veve）
source
6
引导3.x到底需要什么。如果使用2.x remove .bs.collapse。我还进行了更改，shown and hidden to show and hide使动画发生在手风琴打开之前。
— user1881482 2013年
2
这应该是正确的答案，因为它也可以在版本4中运行
— Andres Felipe
嵌套手风琴怎么样？子元素没有人字形，但我仍然可以切换到父元素。
— 深奥的
48

这是我对Bootstrap 2.x的处理方法。这只是一些CSS。无需JavaScript：

    .accordion-caret .accordion-toggle:hover {
        text-decoration: none;
    }
    .accordion-caret .accordion-toggle:hover span,
    .accordion-caret .accordion-toggle:hover strong {
        text-decoration: underline;
    }
    .accordion-caret .accordion-toggle:before {
        font-size: 25px;
        vertical-align: -3px;
    }
    .accordion-caret .accordion-toggle:not(.collapsed):before {
        content: "▾";
        margin-right: 0px;
    }
    .accordion-caret .accordion-toggle.collapsed:before {
        content: "▸";
        margin-right: 0px;
    }

只需将类手风琴插入符号添加到手风琴组div中，如下所示：

<div class="accordion-group accordion-caret">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
            <strong>Header</strong>
        </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
        <div class="accordion-inner">
            Content
        </div>
    </div>
</div>
— 马丁·威克曼
source
2
我真的很喜欢马丁。特别是因为它不显眼。
— 卡斯蒂略J
4
我发现这可以工作，但有一个例外-初始插入符号始终显示为所有部分的展开。一旦展开然后再次折叠，它是正确的。
— Robb Sadler 2014年
8
@Robb-我在html的“ collapse”元素中加入了“ collapsed”类，以解决带有初始箭头的问题。我的html稍有不同，但可能会起作用
— 马克B
1
我也喜欢CSS解决方案。我的一些同事比CSS更喜欢CSS，因此这对我的团队来说是更好的解决方案。感谢您解决初始化部分。现在效果很好！
— Hcabnettek
42

Bootstrap崩溃具有一些事件，您可以对这些事件做出反应：

$(document).ready(function(){    
    $('#accordProfile').on('shown', function () {
       $(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
    });

    $('#accordProfile').on('hidden', function () {
       $(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
    });
});
— 菲利普·霍夫曼
source
1
Muffls，你是明星！很好也很简单，谢谢；-)
— 达伦（Darren）
1
别客气！您也可以使用显示或隐藏，而不是显示和隐藏。试试看。您会看到自己喜欢的那个。
— 菲利普·霍夫曼
1
嗨，马夫斯，有什么想法为什么在我的现场测试站点上不起作用？datascrew.co.uk/gordonedge.com
— 达伦（Darren）
添加$（document）.ready（...在您的main.js中，我已经在上面放置了代码。–
— Philipp Hofmann
8
Bootstrap3：事件名称必须具有.bs.collapse，因此它们是on（'hide.bs.collapse'）和on（'show.bs.collapse'），或者在您想要向其添加更多CSS过渡时显示/隐藏它。
— Langeleppel 2014年
21

使用CSSs伪选择器：在对Bootstrap 3的集成Glyphicons使用HTML进行了微小修改后，就没有了JS答案了...

的CSS

.panel-heading [data-toggle="collapse"]:after
{
    font-family: 'Glyphicons Halflings';
    content: "\e072"; /* "play" icon */
    float: right;
    color: #b0c5d8;
    font-size: 18px;
    line-height: 22px;

    /* rotate "play" icon from > (right arrow) to down arrow */
    -webkit-transform: rotate(-90deg);
    -moz-transform:    rotate(-90deg);
    -ms-transform:     rotate(-90deg);
    -o-transform:      rotate(-90deg);
    transform:         rotate(-90deg);
}
.panel-heading [data-toggle="collapse"].collapsed:after
{
    /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
    -webkit-transform: rotate(90deg);
    -moz-transform:    rotate(90deg);
    -ms-transform:     rotate(90deg);
    -o-transform:      rotate(90deg);
    transform:         rotate(90deg);
}

的HTML

添加class="collapsed"到默认情况下关闭的所有锚标记。

这将使锚点例如

<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">

进入

<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">

CodePen Live示例

http://codepen.io/anon/pen/VYobER

屏幕截图

它在JSBin中的显示方式

— Bafromca
source
1
此jsbin链接已得到报道
— Nick Bartlett
2
将其移至CodePen。感谢您的举报。试试看！
— bafromca 2014年
16

添加到@muffls答案中，以便与所有twitter引导折叠一起使用，并在动画开始之前更改箭头。

$('.collapse').on('show', function(){
    $(this).parent().find(".icon-chevron-left").removeClass("icon-chevron-left").addClass("icon-chevron-down");
}).on('hide', function(){
    $(this).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-left");
});

根据您的HTML结构，您可能需要修改parent()。

— 约翰木兰
source
1
+1放入其中并为我工作-刚刚修改为使用icon-chevron-right而不是left
— azcoastal 2013年
1
这对我有用。其他代码会更改所有选项卡的类，而不是单击它们：)
— vignesh 2013年
10

我认为最好的代码是：

  $('#accordion1').collapse({
    toggle: false
  }).on('show',function (e) {
        $(e.target).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
      }).on('hide', function (e) {
        $(e.target).parent().find(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
      });
— 用户名
source
2
对我来说，这是唯一可行的解​​决方案，休息一下即可切换所有手风琴组的班级。干杯：)
— 最大im13年
6

如果有人感兴趣，这是您使用BS3的方法，因为他们更改了事件名称：

$('.collapse').on('show.bs.collapse', function(){
  var i = $(this).parent().find('i')
  i.toggleClass('fa-caret-right fa-caret-down');
}).on('hide.bs.collapse', function(){
  var i = $(this).parent().find('i')
  i.toggleClass('fa-caret-down fa-caret-right');
});

您只需将示例中的类名更改为您在案例中使用的类名。

— rbsthlm
source
1
感谢b3rgstrom，感激不尽。下次使用BS3时，我会检查一下。
— 达伦（Darren）2013年
1
没有概率，以为将来有人会遇到同样的问题：)
— rbsthlm
5

最易读的纯CSS解决方案可能是使用aria-expanded属性。请记住，您需要将aria-expanded =“ false”添加到所有折叠元素，因为未在加载时设置（仅在首次点击时设置）。

HTML：

<h2 data-toggle="collapse" href="#collapseId" aria-expanded="false">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="glyphicon glyphicon-chevron-down"></span> Title
</h2>

CSS：

h2[aria-expanded="false"] span.glyphicon-chevron-down,
h2[aria-expanded="true"] span.glyphicon-chevron-right
{
    display: none;
}

h2[aria-expanded="true"] span.glyphicon-chevron-down,
h2[aria-expanded="false"] span.glyphicon-chevron-right
{
    display: inline;
}

与Bootstrap 3.x一起使用。

— 安德烈亚斯·伯格斯特伦
source
1
这很完美。因为我的锚标记是数据切换标记，所以我只是将CSS中的h2更改为a
— MC9000，19年
3

这是我的解决方案，它是通过@ john-magnolia发布的解决方案进一步完善的，并解决了其中的一些问题

/**
 * Toggle on/off arrow for Twitter Bootstrap collapsibles.
 *
 * Multi-collapsible-friendly; supports several collapsibles in the same group, on the same page.
 */
function animateCollapsibles() {

    $('.collapse').on('show', function() {
        var $t = $(this);
        var header = $("a[href='#" + $t.attr("id") + "']");
        header.find(".icon-chevron-right").removeClass("icon-chevron-right").addClass("icon-chevron-down");
    }).on('hide', function(){
        var $t = $(this);
        var header = $("a[href='#" + $t.attr("id") + "']");
        header.find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-right");
    });
}

这是标记示例：

<div class="accordion" id="accordion-send">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
                <i class="icon icon-chevron-right"></i> Send notice
            </a>
        </div>
        <div id="collapse-refund" class="accordion-body collapse">
            <div class="accordion-inner">
                <p>Lorem ipsum Toholampi city</p>
            </div>
        </div>
    </div>
</div>
— 大田美子（Mikko Ohtamaa）
source
1
好人-我觉得自己很白痴，但是无法获得上述两种解决方案中的任何一种：-S我能想到的唯一区别是，我使用了新的bootstrap3，因此得到了“ glyphicon glyphicon-chevron-right”类。指针吗？
— benteh 2013年
2
Bootstrap 3不是向后兼容的发行版。请参考Bootstrap 3文档，了解如何迁移代码。
— Mikko Ohtamaa 2013年
1
你好，米克，谢谢你，是我收集的是，在这里得到了很好的帮助：stackoverflow.com/questions/18147338/...
— benteh
3

自举v3的解决方案（其中的事件有不同的名称），也只使用一个jQuery选择（如看到这里）：

$('.accordion').on('hide.bs.collapse show.bs.collapse', function (n) {
    $(n.target).siblings('.panel-heading').find('i.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});
— 盖尔特
source
极好的答案
— Naveen DA
3

这就是我没有任何js的方法。

我使用了图标glyphicon-triangle-right，但是它可以与其他任何图标一起使用，它的作用是在面板打开或不打开时都将图标旋转90度。我正在使用Bootstrap 3.3.5为此。

CSS代码

h4.panel-title a {
    display: block;

}
h4.panel-title a.collapsed .glyphicon-triangle-right {
        color: #ada9a9 !important;
        transform: rotate(0deg);
}
h4.panel-title a .glyphicon-triangle-right {
        color: #515e64 !important;
        transform: rotate(90deg);
}

这是从Bootstrap示例中获取的HTML结构

<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 role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                            Proven Expertise
                                            <span class="glyphicon glyphicon-triangle-right pull-right" aria-hidden="true"></span>
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseOne" class="panel-collapse collapse in" 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>
— 通用电气
source
此方法对我有用，但是初始状态旋转了90度。您能否建议如何使初始状态不旋转（0度）？谢谢！
— 郭宗鼎
1
在锚元素中添加class =“ collapsed”以避免发生什么事情
— 通用电气
感谢您的回复！我实际上尝试过<< h4 class =“ panel-title折叠了” >>，但是没有运气。这是正确的吗？
— 郭宗鼎
1
它必须在锚标记上，因为当onClick事件触发时，bootstrap js会发生什么变化，请检查此页，正在使用我提到的解决方案acubavoy.com/preguntas-frequentes
— General Electric
2

以上都不对我有用，但我想出了这个，它起作用了：

function toggleChevron(el) {
  if ($(el).find('i').hasClass('icon-chevron-left'))
      $(el).find('.icon-chevron-left').removeClass("icon-chevron-left").addClass("icon-chevron-down");
  else 
      $(el).find('.icon-chevron-down').removeClass("icon-chevron-down").addClass("icon-chevron-left");
}

HTML实现：

<div class="accordion" id="accordion-send">
  <div class="accordion-group">
    <div class="accordion-heading" onClick="toggleChevron(this)">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
        <i class="icon icon-chevron-right"></i> Send notice
      </a>
      ...
— 约书亚·本森（Joshua Benson）
source
1

@RobSadler：

RE Martin Wickman的仅CSS版本...

您可以通过将手风琴插入放到anchor标记上并默认给它一个折叠的类来解决这个问题。像这样：

<div class="accordion-group">
<div class="accordion-heading">
    <a class="accordion-toggle accordion-caret collapsed" data-toggle="collapse" href="#collapseOne">
        <strong>Header</strong>
    </a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
    <div class="accordion-inner">
        Content
    </div>
</div>

那对我有用。

— 里约布鲁斯特
source
1

对于Bootstrup 3.2 + FontAwesome

$(document).ready(function(){    
    $('#accordProfile').on('shown.bs.collapse', function () {
       $(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
    });

    $('#accordProfile').on('hidden.bs.collapse', function () {
       $(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
    });
});

有时您必须这样写。如果是这样 

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');

当您按下隐藏菜单时自动生成（class =“ collapsed”）。

ps，当您需要创建树菜单时

— 波波夫·安德烈
source
1

Bootstrap 3和令人赞叹的字体对我来说是最简单，最简单的方法。我已经做了

$('a.toggler').on('click', function () {$('i', this).toggleClass('fa-caret-up');});

这只是切换我要显示的图标的CSS类。我添加类toggler到我想这个应用的项目。可以将其添加到要切换图标的任何项目上。

— 米卡·蒙托亚（Micah Montoya）
source
0

另一个使用折叠功能本身的无JavaScript解决方案：

/* Prevent block display and transition animation */
.expand-icon.collapse.in,
.collapse-icon.collapse.in {
  display: inline; }
.expand-icon.collapsing {
  display: none; }

/* HTML Toggler with glyphicons */
<a data-toggle="collapse" href=".my-collapse">
 <span class="my-collapse collapse-icon collapse in">
  <span class="glyphicon glyphicon-collapse-up"></span>
 </span>
 <span class="my-collapse expand-icon collapse">
  <span class="glyphicon glyphicon-expand"></span>   
 </span>
</a>
— 塞巴斯蒂安·桑格瓦西（Sebastian Sangervasi）
source
0

对于使用Bootstrap 3的仅CSS（无图标）解决方案，我不得不根据Martin Wickman的上述回答进行一些摆弄。

我没有使用手风琴*符号，因为它是在BS3中的面板上完成的。

另外，我必须在页面加载时打开的项目的初始HTML中包含aria-expanded =“ true”。

这是我使用的CSS。

.accordion-toggle:hover { text-decoration: none; }
.accordion-toggle:hover span, .accordion-toggle:hover strong { text-decoration: underline; }
.accordion-toggle:before { font-size: 25px; }
.accordion-toggle[data-toggle="collapse"]:before { content: "+"; margin-right: 0px; }
.accordion-toggle[aria-expanded="true"]:before { content: "-"; margin-right: 0px; }

这是我清理过的HTML：

<div id="acc1">    
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent="#acc1" href="#acc1-1">Title 1
                    </a>
            </span>
        </div>
        <div id=“acc1-1” class="panel-collapse collapse in">
            <div class="panel-body">
                Text 1
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#acc1” href=“#acc1-2”>Title 2
                    </a>
            </span>
        </div>
        <div id=“acc1-2” class="panel-collapse collapse">
            <div class="panel-body">
                Text 2                  
            </div>
        </div>
    </div>
</div>
— 杰西卡·弗雷德里克
source
0

尽可能短的答案。

的HTML

<a data-toggle="collapse" data-parent="#panel-quote-group" href="#collapseQuote">
    <span class="toggle-icon glyphicon glyphicon-collapse-up"></span>
</a>

JS：

<script type="text/javascript">
 $(function () {
     $('a[data-toggle="collapse"]').click(function () {
     $(this).find('span.toggle-icon').toggleClass('glyphicon-collapse-up glyphicon-collapse-down');
     })
 })
 </script>

当然，您可以为选择器使用任何东西代替锚标记a，也可以使用特定的选择器代替this图标是否位于单击的元素之外。

— 朱尼德
source
0

这是一个解决方案，可使用某些材料设计，bootstrap 4.5 / 5 alpha和完全非JavaScript来创建可扩展的部分。

头部样式

<style>
[data-toggle="collapse"] .fa:before {
    content: "\f077";
}

[data-toggle="collapse"].collapsed .fa:before {
    content: "\f078";
}
</style>

正文html

<div class="pt-3 pb-3" style="border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; cursor: pointer;">
<a href="#expandId" class="text-dark float-right collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">
    <i class="fa" aria-hidden="false"></i>
</a>
<a href="#expandId" class="text-dark collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">Expand Header</a>
<div class="collapse" id="expandId">
    CONTENT GOES IN HERE
</div>
— 威廉·沃利
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.