如果在jQuery中打开了其他手风琴，则关闭手风琴 [英] Close accordions if other accordion is open in jQuery

问题描述

我在一页上有多个jQuery手风琴，所有的ID都不同，等等.我试图一次只打开一个手风琴.例如，用户打开一个手风琴，然后继续使用另一把手风琴，而新的手风琴则随着用户刚使用的手风琴的关闭而打开.

反正有这样做吗?

下面是一个手风琴的示例....目前它们看起来都一样.

 < div id =手风琴">< h3 class =一个"href =#section1"> Location</a></h3>< div class ="tab1">< form class ="myform">< label< b> Weeks< b</label< br><输入类型=复选框"；id ="allweeks"/>< label = =所有星期">所有星期"//label.<输入类型=复选框"；id ="w1"/><标签="w1">第1周//label< br><输入类型=复选框"；id ="w2"/><标签="w2">第2周//label< br><输入类型=复选框"；id ="w3"；/><标签="w3">第3周//label< br><输入类型=复选框"；id ="w4"/><标签="w4">第4周//label< br><输入类型=复选框"；id ="w5"；/><标签="w5">第5周//label</br><输入类型=复选框"；id ="w6"/>< label = ="w6">第6周//label< br><输入类型=复选框"；id ="w7"；/>< label = ="w7">第7周//label< br><输入类型=复选框"；id ="w8"；/><标签="w8">第8周//label< br><输入类型=复选框"；id ="w9"；/>< label = ="w9">第9周//label< br><输入类型=复选框"；id ="w10"/><标签="w10">第10周//label< br><输入类型=复选框"；id ="w11"；/><标签="w11">第11周//label< br><输入类型=复选框"；id ="w12"；/><标签="w12">第12周//label< br></form></div> 

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

 < script>$(function(){$(#accordion，#accordion1，#accordion2，#accordion3，#accordion4，#accordion5").accordion();});$(function(){var icons = {标头:"ui-icon-circle-arrow-e"，headerSelected:"ui-icon-circle-arrow-s"};$(#accordion，#accordion1，#accordion2，#accordion3，#accordion4，#accordion5")).accordion({图标:图标，可折叠:true});$("#toggle").button().toggle(function(){$(#accordion，#accordion1，#accordion2，#accordion3，#accordion4，#accordion5").accordion("option"，"icons"，false)；}， 功能 () {$(#accordion，#accordion1，#accordion2，#accordion3，#accordion4，#accordion5").accordion("option"，"icons"，图标)；});});$(function(){$(#accordion，#accordion1，#accordion2，#accordion3，#accordion4，#accordion5").accordion({标头:"h3"，可折叠:true，active:false});});</script> 

解决方案

假定您正在使用jQuery UI手风琴，则可以使用 .accordion('activate'，false)折叠所有部分./p>

首先，在您的HTML中，为所有手风琴容器提供 class ="accordion" ，以使它们更易于寻址.如果需要分别处理手风琴，则可以保留 id ="accordion1" 等属性.

然后，以单个 $(function(){...})结构初始化手风琴(仅一次，而不是3次)，如下所示:

  $(function(){var activeAccordian = null;var $ accordions = $(.accordion").on('click'，function(){activeAccordian =此；}).手风琴({可折叠:正确，活动:错误，图标:错误}).on('accordionchange'，function(event，ui){$ accordions.not(activeAccordian).accordion('activate'，false);});}); 

DEMO

使用 activeAccordian 跟踪活动手风琴非常重要，因为它可以抑制新打开的手风琴的相互重新闭合.

下面的自动解决方案"，其中将 .on('accordionchange'...)替换为 .on('click'...)让我意识到，整个过程将简化为:

  $(function(){var $ accordions = $(.accordion").accordion({可折叠:正确，活动:错误，图标:错误}).on('click'，function(){$ accordions.not(this).accordion('activate'，false);});}); 

在单击处理程序中，由于 .not(this)而已，跟踪活动手风琴的需求就消失了.

DEMO

I have multiple jQuery accordions on one page all with different id's etc.. I'm attempting to only allow one accordion to open at a time. For example the user opens one and then goes on to a different accordion and the new one opens as the one that user was just using closes.

is there anyway of doing this?

Below is an example of one accordion.... they all look the same at the moment.

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

These are the scripts i'm using at the moment

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

解决方案

Assuming you are using the jQuery UI accordion, you can collapse all sections with .accordion('activate', false).

First, in your HTML, give all accordion containers class="accordion" to make them more readily addressable as a group. You can keep the id="accordion1" etc. attributes if you need to address the accordions individually.

Then, initialize the accordions in a single $(function(){...}) structure (just once, not 3 times), as follows :

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

Tracking the active accordion with activeAccordian is all important as it allows reciprocal re-closure of the freshly opened accordion to be suppressed.

EDIT:

The "aussi la solution" below, in which .on('accordionchange' ...) is replaced with .on('click' ...) makes me realise that the whole thing will simplify to :

$(function() {
    var $accordions = $(".accordion").accordion({
        collapsible: true,
        active: false,
        icons: false
    }).on('click', function() {
        $accordions.not(this).accordion('activate', false);
    });
});

The need to track the active accordion disappears as .not(this) in the click handler suffices.

DEMO

这篇关于如果在jQuery中打开了其他手风琴，则关闭手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！