崩溃时Twitter Twitter引导3.0图标更改

Question

这是关于Bootstrap 3.0.我希望图标/ glyphicon在崩溃时更改.即,从封闭的文件夹到打开的文件夹.

我已经进行了广泛的搜索,并且在这里阅读了线程,但无济于事.这个帖子很接近,基本上就是我想要的.如何在Bootstrap 3中使其工作？

Answer 1

collapseBootstrap 3中的事件处理方式不同.现在它将是:

$('#collapseDiv').on('shown.bs.collapse', function () {
   $(".glyphicon").removeClass("glyphicon-folder-close").addClass("glyphicon-folder-open");
});

$('#collapseDiv').on('hidden.bs.collapse', function () {
   $(".glyphicon").removeClass("glyphicon-folder-open").addClass("glyphicon-folder-close");
});

演示:http://www.bootply.com/73101

Answer 2

此代码会找到ID为'Accordion'的手风琴.当显示的事件在折叠面板上触发时,在标题面板(前一个元素)中找到该图标,它会在该HTML代码块中查找并更改您的标志符号图标元素:

$('#accordion .panel-collapse').on('shown.bs.collapse', function () {
    $(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
});

//The reverse of the above on hidden event:

$('#accordion .panel-collapse').on('hidden.bs.collapse', function () {
    $(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right");
});

Answer 3

对于bootstrap折叠加号和减号按钮.

HTML

<div>
  <a data-toggle="collapse" href="#other">
    <h3>Others<span class="pull-right glyphicon glyphicon-plus"></span></h3>
  </a>
  <div id="other" class="collapse">
    <h1>Others are</h1>
  </div>
</div>

使用Javascript

$(document).ready(function () {
     $('.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");
             });
         });

Answer 4

这是一个基于CSS的解决方案,它依赖于默认的bootstrap.js折叠实现.不需要额外的HTML标记(当然可以随意使用字形替换Font-Awesome).

<style>
    .panel-title > a:before {
        font-family: FontAwesome;
        content: "\f07c";
        padding-right: 5px;
    }
    .panel-title > a.collapsed:before {
        content: "\f07b";
    }
</style>

DEMO(Bootstrap 3.3.7):

DEMO(Bootstrap 4.0/Font Awesome 5 CSS):

Answer 5

您也可以使用类作为目标而不是id.

 <a data-toggle="collapse" href=".details">
     <div class="details collapse in">Show details</div> 
     <div class="details collapse">Hide details</div> 
 </a>
 <div class="details collapse">
 ...
 </div>

Answer 6

仅使用CSS，即可使用您的预定义图标更改bootstrap折叠图标：

a[aria-expanded=true] .glyphicon-plus {
    display: none;
}
a[aria-expanded=false] .glyphicon-minus {
    display: none;
}
.pointer{
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<a data-toggle="collapse" class="pointer" aria-expanded="false" data-target="#testCollpase" aria-controls="#testCollpase" >
  <span class="pull-left title-sidebar">Filter By Price</span>
  <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
  <span class="pull-right"><i class="glyphicon glyphicon-minus"></i></span>
  <div class="clearfix"></div>
</a>
<div id="testCollpase" class="collapse">
  <ul>
    <li><a href="#">500$</a></li>
    <li><a href="#">1000$</a></li>
  </ul>
</div>

在HTML中添加aria-expanded="false"并添加两个图标，这是您需要在折叠栏中设置的内容。喜欢，

<a data-toggle="collapse" class="pointer" aria-expanded="false" data-target="#testCollpase" aria-controls="#testCollpase" >
  <span class="pull-left title-sidebar">Filter By Price</span>
  <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
  <span class="pull-right"><i class="glyphicon glyphicon-minus"></i></span>
</a>

并从CSS控制它。当折叠栏展开时

a[aria-expanded=true] .glyphicon-plus {
    display: none;
}

否则会

a[aria-expanded=false] .glyphicon-minus {
    display: none;
}

运行摘要，我想您只需要这个...