Twitter Bootstrap 3.0如何在折叠时更改图标

Question

我希望在折叠时更改图标/字形，即从关闭的文件夹更改为打开的文件夹。

我已经广泛搜索，并在SO上阅读了线程，但没有结果。 这个线程接近了我的需求，基本上就是我想要的。

如何使它在Bootstrap 3中工作？

- benteh

Answer 1

在 Bootstrap 3 中，collapse 事件的处理方式与以前不同。现在可能是以下内容：

$('#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

- Zim

---

太棒了！快完成了！但是它似乎会影响到其他按钮的功能 :-S - benteh

那不是一个有用的评论：当我点击我的文件夹关闭时，所有其他按钮也会变成文件夹打开。 - benteh

将函数内的 $(".glyphicon") 选择器更改为特定按钮的 id 属性，例如 $("#myBtn").removeClass..。 - Carol Skelly

你发帖的那一刻，我就明白了 :-) 非常感谢，并且很感激你花时间解答。 - benteh

Answer 2

这段代码通过查找ID为“Accordion”的手风琴。当折叠的面板触发显示事件时，它会在标题面板中找到图标（前一个元素），并在该HTML代码块内找到并更改你的Glyph图标元素:

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

- Zymotik

---

非常迅速！好的代码。如果你在复制粘贴，请注意，Bootstrap示例使用的是 #accordion ，而不是 #Accordion。 - Patrik Beck

终于在搜寻了一个小时之后，我找到了解决方案！非常感谢你，伙计！ :) - vignesh

这个方法比“正确”的答案更好，因为它可以找到直接折叠的目标。而“正确”的答案会找到页面上每一个折叠的元素，并将所有图标都更改。 - Steven

我认为在这里需要补充的一件重要事情是，通常最好使用shown.bs.collapse事件来响应事件，而不是直接响应点击事件，因为我在其他地方看到过这种建议。这样可以确保在整个折叠/展开过程完成后再更新图标。 - ArthurT

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

-->

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

- Gautam

---

适用于同一页上多个折叠区域的简单易懂的答案。 - Christopher King

简单易懂！ - notzippy

Answer 4

这是一种基于CSS的解决方案，依赖于默认的bootstrap.js折叠实现。不需要额外的HTML标记（当然，可以自由地将Font-Awesome替换为glyphicons）。

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

演示（Bootstrap 3.3.7）：

演示（Bootstrap 4.0 / Font Awesome 5 CSS）：

- Yan F.

---

我最喜欢这个解决方案。尽管我相信Bootstrap内置了一种方法，而不需要添加到CSS中。我很想知道它是什么，但似乎找不到。 - Chud37

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>

- Alexandre

---

伟大的解决方案，更少的干扰。 - Midnightly Coder

请注意，默认行为包括转换，您将在切换期间短暂地看到两个状态。您可以添加自定义CSS，例如 ＃someParent .collapsing：first-child {display：none;} 作为解决方法。 - Carl Bussema

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

运行这段代码，我认为你只需要这个...

- Maniruzzaman Akash

Answer 7

折叠事件的处理方式如下：

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

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

- Aryan

Answer 8

这是我的解决方案：

$('.navbar-toggle').on('click', function() {
    $(this).toggleClass('mobile-close');
})

隐藏默认图标栏：

.mobile-close span {
  display: none !important;
}

然后你可以像这样设计 mobile-close 样式：

.navbar-toggle.mobile-close {    
  cursor: pointer;
  width: 42px;
  height: 32px;
  line-height: 40px;
}
.navbar-toggle.mobile-close:before {
  content: "×";
  font-size: 40px;
  color: #231f20;
 }

- user4120314

Answer 9

在Bootstrap中折叠多个带图标的div的完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Accordion with Plus/Minus Icon</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
    .panel-title .glyphicon{
        font-size: 14px;
    }
</style>
<script>
    $(document).ready(function(){
        // Add minus icon for collapse element which is open by default
        $(".collapse.in").each(function(){
            $(this).siblings(".panel-heading").find(".glyphicon").addClass("glyphicon-minus").removeClass("glyphicon-plus");
        });

        // Toggle plus minus icon on show hide of collapse element
        $(".collapse").on('show.bs.collapse', function(){
            $(this).parent().find(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
        }).on('hide.bs.collapse', function(){
            $(this).parent().find(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
        });
    });
</script>
</head>
<body>
<div class="bs-example">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> What is HTML?</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-plus"></span> What is Bootstrap?</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-plus"></span> What is CSS?</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
    </div>
    <p><strong>Note:</strong> Click on the linked heading text to expand or collapse accordion panels.</p>
</div>
</body>
</html>      

- ankush

Answer 10

这个针对Bootstrap折叠效果的代码可以正常工作：

<script>
    $(document).ready(function () {
        $('#collapseExample').on('hidden.bs.collapse', function () {
            $("#btnDown").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
            })
        $('#collapseExample').on('shown.bs.collapse', function () {
            $("#btnDown").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
            })
        });
</script>

这是我正在使用的HTML代码：

<div class="collapse" id="collapseExample">
     <div class="well">
     ...
     </div>
</div>
<button class="btn btn-default" type="button" data-toggle="collapse" data-         target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
     <span id="btnDown" class="glyphicon glyphicon-chevron-down"></span>
     Settings
</button>

- undead10