如何在嵌套的Bootstrap手风琴中添加加减符号
[英]How to add plus minus symbol to nested bootstrap accordions
问题描述
这个问题是有问题评论的连续性。 如何在引导手风琴上加上减号
如何在嵌套的Bootstrap手风琴中添加正负符号，以使其正常工作？ 目前，他们没有像预期的那样切换。
这是我尝试过的： http : //jsfiddle.net/4t1qs0uv/2/
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：
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');
});
});
2 个解决方案
解决方案1
13 已采纳 2014-10-25 13:28:59
如果您使用正确的样式和唯一的ID实现面板组，则也可以使用CSS在嵌套的切换器上添加指示器。 不需要新的JQuery：
演示： http : //jsbin.com/zixeza/1/
CSS：
.panel-group .panel-heading a:after {
content: '-';
position: absolute;
right: 20px;
top:5px;
}
.panel-group .panel-heading a.collapsed:after {
content: '+';
}
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 -->
解决方案2
0 2015-11-10 13:27:11
我对Font Awesome Icon（fa-plus和fa-minus）所做的相同解决方案，也可以使用fa-chevron-down和fa-chevron-up。
的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内部内容：“ \\ unicode”可在fontAwesome中的每个图标下找到，或转到项目中的font-awesome.css。 http://fortawesome.github.io/Font-Awesome/icon/chevron-down/
的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 -->
如何使用jQuery在基本手风琴上添加正负号？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.