7

1 つのページに複数の jQuery アコーディオンがあり、すべて ID が異なります。一度に 1 つのアコーディオンしか開かないようにしています。たとえば、ユーザーが 1 つを開いてから別のアコーディオンに移動すると、ユーザーが使用していたアコーディオンが閉じると、新しいアコーディオンが開きます。

とにかくこれを行うことはありますか？

以下は 1 つのアコーディオンの例です....現時点ではすべて同じように見えます。

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

1 に答える 1

6

jQuery UI アコーディオンを使用していると仮定すると、すべてのセクションを で折りたたむことができます.accordion('activate', false)。

まず、HTML で、すべてのアコーディオン コンテナーclass="accordion"を指定して、グループとしてより簡単にアドレス指定できるようにします。id="accordion1"アコーディオンに個別に対処する必要がある場合は、 etc. 属性を保持できます。

次に、次のように、単一の 構造体でアコーディオンを初期化します$(function(){...})(3 回ではなく 1 回だけ)。

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

デモ

アクティブなアコーディオンを追跡するactiveAccordianことは、新しく開いたアコーディオンの相互の再閉鎖を抑制することができるため、すべて重要です。

編集：

以下の「aus​​si la solution」では、.on('accordionchange' ...)が に置き換えられて.on('click' ...)おり、全体が次のように単純化されることがわかります。

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

アクティブなアコーディオンを追跡する必要はなく.not(this)なり、クリック ハンドラーで十分です。

デモ

于 2012-11-02T02:04:47.797 に答える