88

我已经设置了这个简单版本的 Bootstrap手风琴：

简单的手风琴：http: //jsfiddle.net/darrenc/cngPS/

目前图标只指向down，但有谁知道需要实现什么 JS 才能将图标的类更改为：

<i class="icon-chevron-up"></i>

...所以它在展开时指向上方，在折叠时再次切换回下方，所以第四个？

4

20 回答 20

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 手风琴示例

于 2013-10-21T16:48:35.740 回答
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>
于 2013-08-20T08:47:48.467 回答
42

Bootstrap Collapse 有一些您可以对其做出反应的事件：

$(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");
    });
});
于 2012-12-08T15:18:20.740 回答
21

使用 CSSes 伪选择器：在使用 Bootstrap 3 的集成 Glyphicons 获得无 JS 答案后，对您的 HTML 进行少量修改......

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 实时示例

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

截屏

它是如何出现在 JSBin 中的

于 2014-05-21T01:19:54.173 回答
16

添加到@muffls 答案中，以便它适用于所有 twitter bootstrap 折叠并在动画开始之前更改箭头。

$('.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().

于 2013-02-24T14:03:41.417 回答
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");
      });
于 2013-04-12T07:47:38.477 回答
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');
});

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

于 2013-11-26T12:18:22.980 回答
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。

于 2017-02-21T10:07:01.110 回答
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>
于 2013-07-18T08:15:12.333 回答
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');
});
于 2014-03-11T06:51:59.700 回答
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>
于 2015-10-02T17:14:06.003 回答
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>
      ...
于 2015-11-23T15:26:22.767 回答
1

@RobSadler：

RE Martin Wickman 的纯 CSS 版本...

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

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

这对我有用。

于 2014-02-05T23:11:28.293 回答
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 当你需要创建树形菜单时

于 2014-09-27T22:50:59.363 回答
1

这已经通过多种方式得到解答，但我想出的是最简单和最简单的 Bootstrap 3 和字体真棒。我已经做了

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

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

于 2015-11-24T15:38:31.550 回答
1

这是这个非常古老的问题的2021 年更新...

引导程序 5

使用 CSS 上/下三角形的图标不可知解决方案（不使用特定的图标库）......

/* for up.down arrows after collapse items with submenus */
[data-bs-toggle="collapse"]::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}

[data-bs-toggle="collapse"].collapsed::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-bottom: 0;
  border-right: 0.3em solid transparent;
  border-top: 0.3em solid;
  border-left: 0.3em solid transparent;
}

演示使用带有折叠子菜单的侧边栏

于 2021-09-15T12:23:56.693 回答
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>
于 2016-06-10T22:38:45.913 回答
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”&gt;Title 2
                    </a>
            </span>
        </div>
        <div id=“acc1-2” class="panel-collapse collapse">
            <div class="panel-body">
                Text 2                  
            </div>
        </div>
    </div>
</div>
于 2017-03-04T17:51:25.213 回答
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您的图标位于单击的元素之外。

于 2018-12-10T20:22:08.310 回答
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>
于 2020-08-29T19:45:17.350 回答