我正在尝试将bootstrap Accordion添加到我的项目中,但它无法正常工作....我在下面添加了JavaScript代码的问题是什么。
我还在我的项目中包含以下文件。 提前致谢。 问候。
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-up"></span>
Fabric
</a>
</h4>
</div>
<div id="fabricBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="#">Wash n Wear</a></li>
<li><a href="#">Cotton</a></li>
<li><a href="#">Silk</a></li>
<li><a href="#">Stone Wash</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Price
</a>
</h4>
</div>
<div id="priceBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="#">3120 to 4680</a></li>
<li><a href="#">4681 to 6240</a></li>
<li><a href="#">Above 6240</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>Men Dresses
</a>
</h4>
</div>
<div id="menDressesBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="#">Classic Sherwani</a></li>
<li><a href="#">Modern Sherwani</a></li>
<li><a href="#">Prince Suit</a></li>
<li><a href="#">Mens Shalwar Kameez</a></li>
<li><a href="#">WaistCoat Suits</a></li>
<li><a href="#">Mens Turbans</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find('.glyphicon-collapse-down').removeClass('.glyphicon-collapse-down')
}).on('hidden.bs.collapse', function () {
$(this).parent().find('..glyphicon-collapse-up').removeClass('.glyphicon-collapse-up').addClass('.glyphicon-collapse-down');
});
});
</script>
答案 0 :(得分:0)
为了改变我想建议使用的手风琴图标:
$(document).ready(function () {
$('.collapse').on('show.bs.collapse hide.bs.collapse', function () {
$(this).closest('.panel').find('.panel-heading .glyphicon').toggleClass('glyphicon-collapse-down glyphicon-collapse-up')
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Fabric
</a>
</h4>
</div>
<div id="fabricBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="#">Wash n Wear</a></li>
<li><a href="#">Cotton</a></li>
<li><a href="#">Silk</a></li>
<li><a href="#">Stone Wash</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Price
</a>
</h4>
</div>
<div id="priceBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="#">3120 to 4680</a></li>
<li><a href="#">4681 to 6240</a></li>
<li><a href="#">Above 6240</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>Men Dresses
</a>
</h4>
</div>
<div id="menDressesBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="#">Classic Sherwani</a></li>
<li><a href="#">Modern Sherwani</a></li>
<li><a href="#">Prince Suit</a></li>
<li><a href="#">Mens Shalwar Kameez</a></li>
<li><a href="#">WaistCoat Suits</a></li>
<li><a href="#">Mens Turbans</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
答案 1 :(得分:0)
您可以查找上一个元素,并找到类.glyphicon
的范围。
然后只需添加或删除上下类。
这是一个例子。
$('.collapse')
.on('show.bs.collapse', function () {
$(this).prev().find('.glyphicon')
.removeClass('glyphicon-collapse-down')
.addClass('glyphicon-collapse-up')
})
.on('hide.bs.collapse', function () {
$(this).prev().find('.glyphicon')
.removeClass('glyphicon-collapse-up')
.addClass('glyphicon-collapse-down')
});
@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-up"></span>
Fabric
</a>
</h4>
</div>
<div id="fabricBody" class="panel-collapse collapse in">
<div class="panel-body">
<ul>
<li><a href="#">Wash n Wear</a></li>
<li><a href="#">Cotton</a></li>
<li><a href="#">Silk</a></li>
<li><a href="#">Stone Wash</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Price
</a>
</h4>
</div>
<div id="priceBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="#">3120 to 4680</a></li>
<li><a href="#">4681 to 6240</a></li>
<li><a href="#">Above 6240</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>Men Dresses
</a>
</h4>
</div>
<div id="menDressesBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="#">Classic Sherwani</a></li>
<li><a href="#">Modern Sherwani</a></li>
<li><a href="#">Prince Suit</a></li>
<li><a href="#">Mens Shalwar Kameez</a></li>
<li><a href="#">WaistCoat Suits</a></li>
<li><a href="#">Mens Turbans</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
答案 2 :(得分:0)
请参阅此链接。 http://jsfiddle.net/panchroma/3gYa3/
仅使用CSS的Bootstrap手风琴
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: grey; /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}