如果在jQuery中打开了其他手风琴，请关闭手风琴

我在一个页面上有多个jQuery手风琴，所有这些手风琴都有不同的id等等。。我试图一次只允许打开一个手风琴。例如，用户打开一个手风琴，然后转到另一个手风琴，新的手风琴打开时，用户刚刚使用的手风琴关闭

这样做有什么好处吗

下面是一个手风琴的例子。。。。他们此刻看起来都一样

<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>

位置
周数

所有周

第一周

第2周

第3周

第4周

第5周

第6周

第7周

第8周

第9周

第10周

第11周

第12周

这些是我目前正在使用的脚本

    <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>

$（函数（）{
美元（“#手风琴，#手风琴1，#手风琴2，#手风琴3，#手风琴4，#手风琴5”）。手风琴（）；
});
$（函数（）{
变量图标={
标题：“ui-icon-circle-arrow-e”，
标题选择：“ui-icon-circle-arrow-s”
};
美元（“#手风琴，#手风琴1，#手风琴2，#手风琴3，#手风琴4，#手风琴5”）。手风琴({
图标：图标，
可折叠：正确
});
$（“#切换”）.button（）.toggle（函数（）{
$（“手风琴”、“手风琴1”、“手风琴2”、“手风琴3”、“手风琴4”、“手风琴5”）。手风琴（“选项”、“图标”，错误）；
}，函数（）{
$（“手风琴”、“手风琴1”、“手风琴2”、“手风琴3”、“手风琴4”、“手风琴5”）。手风琴（“选项”、“图标”、“图标”）；
});
});
$（函数（）{
$（“#手风琴，#手风琴1，#手风琴2，#手风琴3，#手风琴4，#手风琴5”）。手风琴（{标题：“h3”，可折叠：真，活动：假}）；

假设您使用的是jQuery UI accordion，您可以使用

.acordion（'activate'，false）

折叠所有部分

首先，在HTML中，给所有的accordion容器

class=“accordion”

，使它们更容易作为一个组进行寻址。如果需要单独寻址手风琴，可以保留

id=“accordion1”

等属性

然后，在单个结构中初始化手风琴，如下所示：

$(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);
    });
});

使用

activeaccorbian

跟踪活动手风琴非常重要，因为它可以抑制新打开手风琴的反向重新关闭

编辑： 下面的“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);
    });
});

跟踪活动手风琴的需要消失为

。单击处理程序中的（此）

就足够了

---

为什么要在3次不同的时间初始化同一个accordions？@emaurer，请参阅编辑，它提供了一个简化。漂亮的代码，但是我认为jQuery中发生了一些变化，现在是$accordions。不是（这个）。accordion（“选项”，“活动”，false）；