我在一个页面上有多个 jQuery Accordion ,它们都具有不同的 id 等。我试图一次只允许打开一个 Accordion 。例如,用户打开一个 Accordion ,然后转到另一个 Accordion ,新的 Accordion 打开,而用户刚刚使用的 Accordion 关闭。
有办法这样做吗?
下面是一个 Accordion 的示例......它们目前看起来都一样。
<div id="accordion">
<h3 class="one" href="#section1">Location</a></h3>
<div class="tab1">
<form class="myform">
<label><b>Weeks</b></label><br>
<input type = "checkbox" id = "allweeks" /> <label for = "allweeks">All Weeks</label><br>
<input type = "checkbox" id = "w1" /> <label for = "w1">Week 1</label><br>
<input type = "checkbox" id = "w2" /> <label for = "w2">Week 2</label><br>
<input type = "checkbox" id = "w3" /> <label for = "w3">Week 3</label><br>
<input type = "checkbox" id = "w4" /> <label for = "w4">Week 4</label><br>
<input type = "checkbox" id = "w5" /> <label for = "w5">Week 5</label></br>
<input type = "checkbox" id = "w6" /> <label for = "w6">Week 6</label><br>
<input type = "checkbox" id = "w7" /> <label for = "w7">Week 7</label><br>
<input type = "checkbox" id = "w8" /> <label for = "w8">Week 8</label><br>
<input type = "checkbox" id = "w9" /> <label for = "w9">Week 9</label><br>
<input type = "checkbox" id = "w10" /> <label for = "w10">Week 10</label><br>
<input type = "checkbox" id = "w11" /> <label for = "w11">Week 11</label><br>
<input type = "checkbox" id = "w12" /> <label for = "w12">Week 12</label><br>
</form>
</div>
这些是我目前正在使用的脚本
<script>
$(function() {
$( "#accordion,#accordion1,#accordion2,#accordion3,#accordion4,#accordion5" ).accordion();
});
$(function() {
var icons = {
header: "ui-icon-circle-arrow-e",
headerSelected: "ui-icon-circle-arrow-s"
};
$( "#accordion,#accordion1,#accordion2,#accordion3,#accordion4,#accordion5" ).accordion({
icons: icons,
collapsible: true
});
$( "#toggle" ).button().toggle(function () {
$( "#accordion,#accordion1,#accordion2,#accordion3,#accordion4,#accordion5" ).accordion( "option", "icons", false );
}, function () {
$( "#accordion,#accordion1,#accordion2,#accordion3,#accordion4,#accordion5" ).accordion( "option", "icons", icons );
});
});
$(function() {
$("#accordion,#accordion1,#accordion2,#accordion3,#accordion4,#accordion5").accordion({ header: "h3", collapsible: true, active: false }); });
</script>
最佳答案
假设您使用的是 jQuery UI Accordion ,您可以使用 .accordion('activate', false) 折叠所有部分
。
首先,在 HTML 中,为所有折叠容器指定 class="accordion"
,使它们作为一个组更容易寻址。如果您需要单独处理 Accordion ,您可以保留 id="accordion1"
等属性。
然后,在单个 $(function(){...})
结构中初始化 Accordion (仅一次,而不是 3 次),如下所示:
$(function() {
var activeAccordian = null;
var $accordions = $(".accordion").on('click', function() {
activeAccordian = this;
}).accordion({
collapsible: true,
active: false,
icons: false
}).on('accordionchange', function(event, ui) {
$accordions.not(activeAccordian).accordion('activate', false);
});
});
<强> DEMO
使用 activeAccordian
跟踪事件的折叠面板非常重要,因为它可以抑制新打开的折叠面板的相互重新关闭。
编辑:
下面的“aussi la 解决方案”,其中 .on('accordionchange' ...)
替换为 .on('click' ...)
让我意识到整个事情将简化为:
$(function() {
var $accordions = $(".accordion").accordion({
collapsible: true,
active: false,
icons: false
}).on('click', function() {
$accordions.not(this).accordion('activate', false);
});
});
跟踪事件 Accordion 的需要消失了,因为点击处理程序中的 .not(this)
就足够了。
<强> DEMO
关于jquery - 如果其他 Accordion 在 jQuery 中打开,则关闭 Accordion ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13186993/