Question

我在一个页面上有多个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>

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

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

Answer 1

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

首先，在您的HTML中，提供所有手风琴容器class="accordion"，使其更容易作为一个群体进行寻址。如果您需要单独处理手风琴，可以保留id="accordion1"等属性。

然后，在单个 $(function(){...})结构中初始化手风琴（只需一次，而不是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);
    });
});

当点击处理程序中的.not(this)足够时，跟踪活动手风琴的需求就会消失。

<强> DEMO

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

1 个答案:

编辑：