Fatal编程技术网
  • javascript/
  • Javascript 将打开/关闭图标添加到Twitter引导折叠文件（手风琴）

Javascript 将打开/关闭图标添加到Twitter引导折叠文件（手风琴）

javascript jquery twitter-bootstrap

Javascript 将打开/关闭图标添加到Twitter引导折叠文件（手风琴）,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,我已经设置了这个简单版本的引导： $('.collapsed span').removeClass('fa-minus').addClass('fa-plus'); 简单手风琴： $('.collapsed span').removeClass('fa-minus').addClass('fa-plus'); 目前图标只指向下方，但是有人知道需要实现什么JS才能将图标的类别更改为： <i class="icon-chevron-up"></i> $('.colla

我已经设置了这个简单版本的引导：

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
简单手风琴： 

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
目前图标只指向下方，但是有人知道需要实现什么JS才能将图标的类别更改为：

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

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
…这样，当展开时，它会指向向上，当折叠时，它会再次切换回向下，因此第四个？

引导折叠有一些事件，您可以对此作出反应：

$(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");
    });
});

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
添加到@muffls-answer，以便在动画开始之前对所有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");
});

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
根据您的HTML结构，您可能需要修改
parent（）

我认为最好的代码如下：

  $('#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");
      });

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
这是我的解决方案，它是从@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");
    });
}

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
下面是示例标记：

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

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


Toholampi市的Lorem ipsum


$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
以下是我对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;
    }

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
只需将class accordion插入符号添加到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>

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


内容
对于那些在Bootstrap 3中寻找解决方案的人（比如我自己），这里给出了答案

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
HTML部分：
手风琴示例：

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

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
您只需将示例中的类名更改为案例中使用的类名。

@RobSadler:

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
你是Martin Wickman唯一的CSS版本

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
您可以通过在锚标记上放置手风琴插入符号并默认为其提供一个折叠的类来解决这个问题。像这样：

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

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


内容


$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
这对我很有用。

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

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
使用CSSes伪选择器：在使用Bootstrap3的集成Glyphicons进行无JS回答后，只需对HTML进行少量修改

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
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);
}

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

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

<a data-toggle="collapse" data-parent="#panel-quote-group" href="#collapseQuote">
    <span class="toggle-icon glyphicon glyphicon-collapse-up"></span>
</a>
将
class=“collapsed”
添加到默认关闭的任何锚定标记中

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
这将转动锚，例如

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

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



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


屏幕截图


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



对于Bootstrup 3.2+版本


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


有时候你不得不这样写。如果是的话



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


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


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



ps当您需要创建树菜单时
这是我在不使用任何js的情况下的做法


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


我使用图标图示符图标三角形，但它与任何其他图标一起工作，它所做的是在面板打开或未打开时对图标应用90度旋转。我使用的是引导程序3.3.5


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


CSS代码


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



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


这是取自引导示例的HTML结构


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



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




动物保护协会的陈词滥调，埃尼姆·埃乌斯莫德的高寿命accusamus terry richardson广告鱿鱼。3狼月亮奥特餐厅，非丘比特滑板多洛早午餐。食品车奎奴亚藜。早午餐3狼月亮临时，圣塔阿利夸放了一只鸟在上面鱿鱼单一来源咖啡NullaAssumenda shoreditch等Nihil anim keffiyeh helvetica，工艺啤酒工人wes anderson cred Nesciut sapiente ea proident。纯素食主义者，屠夫副洛莫。紧身裤从工艺啤酒场到餐桌，生料牛仔布美学合成物，你可能还没听说过accusamus labore可持续VHS。

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


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



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实现：


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



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




...

这一点已经得到了很多答案，但我想到的是最简单、最简单的Bootstrap 3和font Aweasome。我就这么做了


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



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



这只是切换我想要显示的图标的CSS类。我将类切换器添加到我要将其应用到的项中。这可以添加到任何要切换图标的项目上。
另一个使用折叠功能本身的无javascript解决方案：


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



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



/*防止块显示和转换动画*/
.expand-icon.collapse.in，
.collapse-icon.collapse.in{
显示：内联；}
.expand-icon.collasing{
显示：无；}
/*带有字形图标的HTML切换程序*/

最具可读性的CSS唯一解决方案可能是使用aria扩展属性。请记住，您需要向所有折叠元素添加aria expanded=“false”，因为这不是在加载时设置的（仅在第一次单击时）


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


HTML：
与Bootstrap3.x配合使用。
对于使用Bootstrap3的仅CSS（且无图标）解决方案，我不得不根据上面Martin Wickman的回答做一些修改


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


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


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


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


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


这是我使用的CSS


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



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


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



<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
文本2

最短可能的答案


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