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

问题描述

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

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.

反正有这样做吗?

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

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>

推荐答案

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

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

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

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.

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

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

DEMO

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

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

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

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

随着单击处理程序中的.not(this)足够，跟踪活动手风琴的需求就消失了.

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

演示

DEMO

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