首页 文章

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

提问于
浏览 次
79

我已经设置了这个简单版本的Bootstrap accordion：

Simple accordion: http://jsfiddle.net/darrenc/cngPS/

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

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

...当 expanded 时它指向 up 并在折叠时再次切换回 down ，那么第四个？

javascript jquery twitter-bootstrap

18 回答

  • 3

    对于那些正在寻找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 accordion example

    回复于
  • 3

    这是我对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;
    }

    只需将class accordion-caret添加到accordion-group 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>
    回复于
  • 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");
    });
});
    回复于
  • 2

    使用CSSes伪选择器：在使用Bootstrap 3的集成Glyphicons进行 no JS answer 之后对您的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 Live Example

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

    Screenshot

    How it appears in JSBin

    回复于
  • 6

    添加到@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() .

    回复于
  • 0

    我认为最好的代码是：

    $('#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");
      });
    回复于
  • 10

    如果有人有兴趣，这就是你如何使用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');
});

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

    回复于
  • 20

    这是我的解决方案，由@ 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>
    回复于
  • 89

    一个bootstrap v3解决方案（其中事件具有不同的名称），也只使用一个jQuery选择器（如here所示）：

    $('.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');
});
    回复于
  • 3

    最可读的CSS解决方案可能是使用aria-expanded属性 . 请记住，您需要将aria-expanded =“false”添加到所有collapse元素，因为这不会在加载时设置（仅在第一次单击时） .

    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.

    回复于
  • 1

    这就是我没有任何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>
    回复于
  • 0

    以上都没有为我工作，但我提出了这个并且它有效：

    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>
      ...
    回复于
  • 0

    @RobSadler：

    RE Martin Wickman的CSS版本......

    您可以通过将accordion-caret放在锚标记上并默认为其提供折叠类来解决该问题 . 像这样：

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

    这对我有用 .

    回复于
  • 2

    对于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当你需要创建树状菜单时

    回复于
  • 45

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

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

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

    回复于
  • 1

    另一个使用折叠功能的no-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>
    回复于
  • 16

    对于使用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>
    回复于
  • 1

    最短的答案 .

    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 .

    回复于

相关问题