Javascript 如何向嵌套的引导手风琴添加加减符号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26562687/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-22 23:03:11 来源:igfitidea点击:
How to add plus minus symbol to nested bootstrap accordions
提问by Osh Mansor
This question is a continuity from comments in question How to add plus minus symbol to a bootstrap accordion
这个问题是问题评论的连续性 如何向引导手风琴添加加减符号
How to add plus and minus symbols to nested bootstrap accordions and make them work correctly? Currently, they are not toggling as expected.
如何向嵌套的引导手风琴添加加号和减号并使其正常工作？目前，它们没有按预期切换。
This is what I have tried: http://jsfiddle.net/4t1qs0uv/2/
这是我尝试过的：http: //jsfiddle.net/4t1qs0uv/2/
HTML:
HTML：
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#livingroom-10" class="collapsed">Living Room</a>
</h4>
</div>
<div id="livingroom-10" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<div class="panel-group" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#add101">
Air Condition
</a>
</h4>
</div>
<div id="add101" class="panel-collapse collapse">
<div class="panel-body">
<form class="form-inline" role="form">
<div class="form-group">
<label for="usageperday">Usage Per Day</label><br>
<input type="text" class="form-control" name="usageperday-1.0.1" placeholder="Usage Per Day" value="8">
</div>
<div class="form-group">
<label for="numbermonth">Number of days used per month</label><br>
<input type="text" class="form-control" name="numbermonth-1.0.1" placeholder="Number of days used per month" value="30">
</div>
<div class="form-group">
<label for="watts">Watts</label><br>
<input type="text" class="form-control" name="watts-1.0.1" placeholder="Watts" value="1500">
</div>
</form>
</div>
</div>
</div>
</div>
<div class="panel-group" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#add102">
Fan
</a>
</h4>
</div>
<div id="add102" class="panel-collapse collapse in">
<div class="panel-body">
<form class="form-inline" role="form">
<div class="form-group">
<label for="usageperday">Usage Per Day</label><br>
<input type="text" class="form-control" name="usageperday-1.0.2" placeholder="Usage Per Day" value="8">
</div>
<div class="form-group">
<label for="numbermonth">Number of days used per month</label><br>
<input type="text" class="form-control" name="numbermonth-1.0.2" placeholder="Number of days used per month" value="30">
</div>
<div class="form-group">
<label for="watts">Watts</label><br>
<input type="text" class="form-control" name="watts-1.0.2" placeholder="Watts" value="90">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#bathroom-20" class="collapsed">
Bathroom
</a>
</h4>
</div>
<div id="bathroom-20" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<div class="panel-group" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#add2029">
Router
</a>
</h4>
</div>
<div id="add2029" class="panel-collapse collapse">
<div class="panel-body">
<form class="form-inline" role="form">
<div class="form-group">
<label for="usageperday">Usage Per Day</label><br>
<input type="text" class="form-control" name="usageperday-2.0.29" placeholder="Usage Per Day" value="24">
</div>
<div class="form-group">
<label for="numbermonth">Number of days used per month</label><br>
<input type="text" class="form-control" name="numbermonth-2.0.29" placeholder="Number of days used per month" value="30">
</div>
<div class="form-group">
<label for="watts">Watts</label><br>
<input type="text" class="form-control" name="watts-2.0.29" placeholder="Watts" value="10">
</div>
</form>
</div>
</div>
</div>
</div>
<div class="panel-group" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#add2030">
Scanner
</a>
</h4>
</div>
<div id="add2030" class="panel-collapse collapse">
<div class="panel-body">
<form class="form-inline" role="form">
<div class="form-group">
<label for="usageperday">Usage Per Day</label><br>
<input type="text" class="form-control" name="usageperday-2.0.30" placeholder="Usage Per Day" value="0.1">
</div>
<div class="form-group">
<label for="numbermonth">Number of days used per month</label><br>
<input type="text" class="form-control" name="numbermonth-2.0.30" placeholder="Number of days used per month" value="2">
</div>
<div class="form-group">
<label for="watts">Watts</label><br>
<input type="text" class="form-control" name="watts-2.0.30" placeholder="Watts" value="20">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript:
JavaScript：
jQuery(function ($) {
var $active = $('#accordion1 .panel-collapse.in').prev().addClass('active');
$active.find('a').append('<span class="glyphicon glyphicon-minus pull-right"></span>');
$('#accordion1 .panel-heading').not($active).find('a').prepend('<span class="glyphicon glyphicon-plus pull-right"></span>');
$('#accordion1').on('show.bs.collapse', function (e) {
$('#accordion1 .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
$(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
});
$('#accordion1').on('hide.bs.collapse', function (e) {
$(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
});
var $active2 = $('#accordion2 .panel-collapse.in').prev().addClass('active');
$active2.find('a').append('<span class="glyphicon glyphicon-minus pull-right"></span>');
$('#accordion2 .panel-heading').not($active2).find('a').prepend('<span class="glyphicon glyphicon-plus pull-right"></span>');
$('#accordion2').on('show.bs.collapse', function (e) {
$('#accordion2 .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
$(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
});
$('#accordion2').on('hide.bs.collapse', function (e) {
$(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
});
});
回答by Christina
If you implement the panel-group with the correct styles and unique ids, you can use CSS to add indicators on the toggle nested too. No new JQuery required:
如果您使用正确的样式和唯一的 id 实现面板组，您也可以使用 CSS 在切换嵌套上添加指示器。不需要新的 JQuery：
DEMO: http://jsbin.com/zixeza/1/
演示：http: //jsbin.com/zixeza/1/
CSS:
CSS：
.panel-group .panel-heading a:after {
content: '-';
position: absolute;
right: 20px;
top:5px;
}
.panel-group .panel-heading a.collapsed:after {
content: '+';
}
HTML:
HTML：
<div class="container">
<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">
Collapsible Group Item #1
</a>
</h4>
</div><!--/.panel-heading -->
<div id="collapseOne" class="panel-collapse collapse in">
<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><!--/.panel-body -->
</div><!--/.panel-collapse -->
</div><!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div><!--/.panel-heading -->
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<!-- nested -->
<div class="panel-group" id="nested">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#nested" href="#nested-collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div><!--/.panel-heading -->
<div id="nested-collapseOne" class="panel-collapse collapse in">
<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><!--/.panel-body -->
</div><!--/.panel-collapse -->
</div><!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div><!--/.panel-heading -->
<div id="nested-collapseTwo" class="panel-collapse collapse">
<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><!--/.panel-body -->
</div><!--/.panel-collapse -->
</div><!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div><!--/.panel-heading -->
<div id="nested-collapseThree" class="panel-collapse collapse">
<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><!--/.panel-body -->
</div><!--/.panel-collapse -->
</div><!-- /.panel -->
</div><!-- /.panel-group -->
<!-- nested -->
</div><!--/.panel-body -->
</div><!--/.panel-collapse -->
</div><!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div><!--/.panel-heading -->
<div id="collapseThree" class="panel-collapse collapse">
<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><!--/.panel-body -->
</div><!--/.panel-collapse -->
</div><!-- /.panel -->
</div><!-- /.panel-group -->
</div><!-- /.container -->
回答by Aamer Shahzad
The same solution i did with Font Awesome Icon (fa-plus and fa-minus) you can also use fa-chevron-down and fa-chevron-up.
我用 Font Awesome Icon（fa-plus 和 fa-minus）做的同样的解决方案，你也可以使用 fa-chevron-down 和 fa-chevron-up。
CSS
CSS
.panel-group .panel-heading a:before {
font-family: fontAwesome;
position: absolute;
color: #fff;
font-size: 20px;
top: 8px;
right: 10px;
}
.panel-group .panel-heading a:before {
content: "\f068";
}
.panel-group .panel-heading a.collapsed:before {
content: "\f067";
}
unicode inside content: "\unicode" can be found under each icon in fontAwesome or go to font-awesome.css in your project. http://fortawesome.github.io/Font-Awesome/icon/chevron-down/
unicode inside content: "\unicode" 可以在 fontAwesome 的每个图标下找到，或者去你的项目中的 font-awesome.css 。http://fortawesome.github.io/Font-Awesome/icon/chevron-down/
HTML
HTML
<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">
Collapsible Group Item #1
</a>
</h4>
</div><!--/.panel-heading -->
<div id="collapseOne" class="panel-collapse collapse in">
<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><!--/.panel-body -->
</div><!--/.panel-collapse -->
</div><!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div><!--/.panel-heading -->
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<!-- nested -->
<div class="panel-group" id="nested">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#nested" href="#nested-collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div><!--/.panel-heading -->
<div id="nested-collapseOne" class="panel-collapse collapse in">
<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><!--/.panel-body -->
</div><!--/.panel-collapse -->
</div><!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div><!--/.panel-heading -->
<div id="nested-collapseTwo" class="panel-collapse collapse">
<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><!--/.panel-body -->
</div><!--/.panel-collapse -->
</div><!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div><!--/.panel-heading -->
<div id="nested-collapseThree" class="panel-collapse collapse">
<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><!--/.panel-body -->
</div><!--/.panel-collapse -->
</div><!-- /.panel -->
</div><!-- /.panel-group -->
</div><!--/.panel-body -->
</div><!--/.panel-collapse -->
</div><!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div><!--/.panel-heading -->
<div id="collapseThree" class="panel-collapse collapse">
<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><!--/.panel-body -->
</div><!--/.panel-collapse -->
</div><!-- /.panel -->
</div><!-- /.panel-group -->
