jQuery:旋转加减字体真棒图标,在手风琴部分点击
jQuery: spin plus to minus font awesome icon, on accordion section click
我正在尝试学习如何在单击时将加号图标旋转/旋转为减号。
我看到 Lukasz Watroba 对 vAccordion 的影响。
现在我只能让代码将加号图标切换为减号图标,但没有旋转/转换效果:
加价:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1 <i class="fa fa-plus"></i>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Content #1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2 <i class="fa fa-plus"></i>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Content #2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3 <i class="fa fa-plus"></i>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Content #3
</div>
</div>
</div>
</div>
JavaScript:
function toggleSign(e) {
$(e.target)
.prev('.panel-heading')
.find('i')
.toggleClass('fa fa-minus fa fa-plus');
}
$('#accordion').on('hidden.bs.collapse', toggleSign);
$('#accordion').on('shown.bs.collapse', toggleSign);
希望能一如既往地在这里得到一些积极的帮助,以了解如何达到我需要的效果。
非常感谢。
您可能需要为此对象添加动画http://jsfiddle.net/ntd9fkzu/8/
** above this fiddle may help you **
如果您希望 plus/minus 无缝过渡,您可以使用伪元素而不是字体图标(在您提供的示例中就是这样做的)。这样做,您也可以避免使用任何额外的 jQuery。
在下面的示例中,图标根据在 .accordion-toggle
元素上自动切换的 .collapsed
class 进行更改。 ::after
伪元素的不透明度被切换以创建您要实现的过渡。
下面的片段:
.accordion-toggle {
position: relative;
}
.accordion-toggle::before,
.accordion-toggle::after {
content: '';
display: block;
position: absolute;
top: 50%;
right: -22px;
width: 14px;
height: 4px;
margin-top: -2px;
background-color: #000;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.accordion-toggle::before {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
.accordion-toggle.collapsed::before {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
.accordion-toggle.collapsed::after {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Content #1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Content #2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Content #3
</div>
</div>
</div>
</div>
或者,如果您仍想使用 awesome 字体,可以使用以下方法。不幸的是,过渡不会像上面那样顺利,因为您不能像在伪元素之间过渡那样在两个图标之间过渡。
下面的片段:
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i")
.toggleClass('fa fa-minus fa fa-plus');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
.accordion-toggle + .fa {
display: inline-block;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.accordion-toggle.collapsed + .fa {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a><i class="fa fa-plus"></i>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Content #1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a><i class="fa fa-plus"></i>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Content #2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a><i class="fa fa-plus"></i>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Content #3
</div>
</div>
</div>
</div>
我正在尝试学习如何在单击时将加号图标旋转/旋转为减号。
我看到 Lukasz Watroba 对 vAccordion 的影响。
现在我只能让代码将加号图标切换为减号图标,但没有旋转/转换效果:
加价:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1 <i class="fa fa-plus"></i>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Content #1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2 <i class="fa fa-plus"></i>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Content #2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3 <i class="fa fa-plus"></i>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Content #3
</div>
</div>
</div>
</div>
JavaScript:
function toggleSign(e) {
$(e.target)
.prev('.panel-heading')
.find('i')
.toggleClass('fa fa-minus fa fa-plus');
}
$('#accordion').on('hidden.bs.collapse', toggleSign);
$('#accordion').on('shown.bs.collapse', toggleSign);
希望能一如既往地在这里得到一些积极的帮助,以了解如何达到我需要的效果。
非常感谢。
您可能需要为此对象添加动画http://jsfiddle.net/ntd9fkzu/8/
** above this fiddle may help you **
如果您希望 plus/minus 无缝过渡,您可以使用伪元素而不是字体图标(在您提供的示例中就是这样做的)。这样做,您也可以避免使用任何额外的 jQuery。
在下面的示例中,图标根据在 .accordion-toggle
元素上自动切换的 .collapsed
class 进行更改。 ::after
伪元素的不透明度被切换以创建您要实现的过渡。
下面的片段:
.accordion-toggle {
position: relative;
}
.accordion-toggle::before,
.accordion-toggle::after {
content: '';
display: block;
position: absolute;
top: 50%;
right: -22px;
width: 14px;
height: 4px;
margin-top: -2px;
background-color: #000;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.accordion-toggle::before {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
.accordion-toggle.collapsed::before {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
.accordion-toggle.collapsed::after {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Content #1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Content #2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Content #3
</div>
</div>
</div>
</div>
或者,如果您仍想使用 awesome 字体,可以使用以下方法。不幸的是,过渡不会像上面那样顺利,因为您不能像在伪元素之间过渡那样在两个图标之间过渡。
下面的片段:
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i")
.toggleClass('fa fa-minus fa fa-plus');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
.accordion-toggle + .fa {
display: inline-block;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.accordion-toggle.collapsed + .fa {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a><i class="fa fa-plus"></i>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Content #1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a><i class="fa fa-plus"></i>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Content #2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a><i class="fa fa-plus"></i>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Content #3
</div>
</div>
</div>
</div>