我当前正在设置一个常见问题页面,并且我需要添加一个功能来单击按钮来扩展/折叠所有答案。如果单击扩展链接/按钮,它将显示手风琴的所有内容,然后将标签“全部扩展”替换为“全部折叠”,反之亦然。
我不确定是否可以调整当前的JS。
//hides a accordion panel
function close(opts) {
opened = $(document).find('.' + opts.cssOpen);
$.each(opened, function() {
//give the proper class to the linked element
$(this).addClass(opts.cssClose).removeClass(opts.cssOpen);
opts.animateClose($(this), opts);
});
}
//opens a accordion panel
function open($this, opts) {
close(opts);
//give the proper class to the linked element
$this.removeClass(opts.cssClose).addClass(opts.cssOpen);
//open the element
opts.animateOpen($this, opts);
//do cookies if plugin available
if (useCookies(opts)) {
// split the cookieOpen string by ","
id = $this.attr('id');
setCookie(id, opts);
}
}
//toggle a accordion on an event
function toggle($this, opts) {
// close the only open item
if ($this.hasClass(opts.cssOpen))
{
close(opts);
//do cookies if plugin available
if (useCookies(opts)) {
// split the cookieOpen string by ","
setCookie('', opts);
}
return false;
}
close(opts);
//open a closed element
open($this, opts);
return false;
}
答案 0 :(得分:0)
您可以使用下面的jquery和bootstrap代码获得相同的功能:
html代码
<div class="container">
<div class="accordion-option">
<h3 class="title">Lorem Ipsum</h3>
<a href="javascript:void(0)" class="toggle-accordion active" accordion-id="#accordion"></a>
</div>
<div class="clearfix"></div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit,
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Anim pariatur cliche reprehenderit
</div>
</div>
</div>
</div>
</div>
Css代码:
body {
color: #6a6c6f;
background-color: #f1f3f6;
margin-top: 30px;
}
.container {
max-width: 960px;
}
.panel-default>.panel-heading {
color: #333;
background-color: #fff;
border-color: #e4e5e7;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.panel-default>.panel-heading a {
display: block;
padding: 10px 15px;
}
.panel-default>.panel-heading a:after {
content: "";
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
float: right;
transition: transform .25s linear;
-webkit-transition: -webkit-transform .25s linear;
}
.panel-default>.panel-heading a[aria-expanded="true"] {
background-color: #eee;
}
.panel-default>.panel-heading a[aria-expanded="true"]:after {
content: "\2212";
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.panel-default>.panel-heading a[aria-expanded="false"]:after {
content: "\002b";
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.accordion-option {
width: 100%;
float: left;
clear: both;
margin: 15px 0;
}
.accordion-option .title {
font-size: 20px;
font-weight: bold;
float: left;
padding: 0;
margin: 0;
}
.accordion-option .toggle-accordion {
float: right;
font-size: 16px;
color: #6a6c6f;
}
.accordion-option .toggle-accordion:before {
content: "Expand All";
}
.accordion-option .toggle-accordion.active:before {
content: "Collapse All";
}
JavaScript代码:
$(document).ready(function() {
$(".toggle-accordion").on("click", function() {
var accordionId = $(this).attr("accordion-id"),
numPanelOpen = $(accordionId + ' .collapse.in').length;
$(this).toggleClass("active");
if (numPanelOpen == 0) {
openAllPanels(accordionId);
} else {
closeAllPanels(accordionId);
}
})
openAllPanels = function(aId) {
console.log("setAllPanelOpen");
$(aId + ' .panel-collapse:not(".in")').collapse('show');
}
closeAllPanels = function(aId) {
console.log("setAllPanelclose");
$(aId + ' .panel-collapse.in').collapse('hide');
}
});
对于给定的代码,您必须使用bootstarp 3.3.6,这些代码在我使用过引导程序3.3.6的旧项目中使用,或者您可以为引导程序4进行修改。
引导CSS链接:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
jQuery和bootstrap js链接
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>