jQuery Twitter bootstrap 3.0 图标在折叠时发生变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18147338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap 3.0 icon change on collapse
提问by benteh
This is about Bootstrap 3.0. I would like the icon/glyphicon to change on collapse. I.e, from a closed folder to an open one.
这是关于 Bootstrap 3.0。我希望图标/字形在折叠时发生变化。即，从一个封闭的文件夹到一个打开的文件夹。
I have searched far and wide, and have read threads here on SO, but to no avail. This thread was close,and is basically what I want. How can I make it work in Bootstrap 3?
我进行了广泛的搜索，并阅读了关于 SO 的主题，但无济于事。这个线程很接近，基本上是我想要的。我怎样才能让它在 Bootstrap 3 中工作？
采纳答案by Yan F.
This is a CSS-based solution that relies on the default bootstrap.js collapse implementation. No additional HTML markup required (feel free to replace Font-Awesome with glyphicons, of course).
这是一个基于 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>
回答by Zim
The collapseevents are handled differently in Bootstrap 3. Now it would be something like:
该collapse事件在引导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");
});
回答by Zymotik
This code finds your accordion with the ID of 'Accordion'. When the shown event fires on the collapsed panel, the icon is found in the header panel (the previous element) and it finds and changes your glyph icon element within that HTML code block:
此代码使用 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");
});
回答by Gautam
For bootstrap collapse plus and minus sign button.
用于引导折叠加号和减号按钮。
HTML
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");
});
});
回答by Alexandre
You could also use a class as target instead of an id.
您还可以使用类作为目标而不是 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>
回答by Maniruzzaman Akash
Using only CSS, the bootstrap collapse icon can be changed with your predefined icons:
仅使用 CSS，引导程序折叠图标可以更改为您预定义的图标：
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>In your HTML add aria-expanded="false"and add two icons what you need to set in your collapse bar. Like,
在您的 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>
And control it from css. When collapse bar expand then
并从 css 控制它。当折叠栏展开时
a[aria-expanded=true] .glyphicon-plus {
display: none;
}
otherwise it will be
否则它将是
a[aria-expanded=false] .glyphicon-minus {
display: none;
}
Run the snippet and I think you just need this...
运行代码片段，我认为你只需要这个......
回答by Aryan
The collapse events are handled as:
折叠事件的处理方式如下：
$('#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");
});
回答by Plastik
Here is my solution:
这是我的解决方案：
$('.navbar-toggle').on('click', function() {
$(this).toggleClass('mobile-close');
})
Hide default icon bars:
隐藏默认图标栏：
.mobile-close span {
display: none !important;
}
Then you can style mobile-close something like:
然后你可以设置移动关闭的样式，例如：
.navbar-toggle.mobile-close {
cursor: pointer;
width: 42px;
height: 32px;
line-height: 40px;
}
.navbar-toggle.mobile-close:before {
content: "×";
font-size: 40px;
color: #231f20;
}
回答by ankush
The complete code for collapse multiple div with icons in bootstrap
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>
回答by undead10
This one working just fine for bootstrap collapse:
这个对于引导崩溃工作得很好：
<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>
This is the HTML code I using:
这是我使用的 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>
