Javascript 调整accordion以使用多个实例

我使用的jQuery accordion带有一个collapse/hide all选项，它只适用于一个实例。一旦放入第二个（或更多）实例，脚本就会切换所有手风琴上的所有面板，因为它不“知道”它应该区分不同的手风琴进行切换。有没有一种简单的方法可以让脚本识别在什么手风琴上使用切换按钮？可能是通过临时身份证

HTML

<h2>First accordion</h2>
<div class="accordion">
    <a class="toggle_open" id="button_toggle">Toggle all</a>
    <h5>Which is the first question?</h5>
    <div class="accordion_text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci natus quas quod doloremque, dolore aliquid, blanditiis eligendi nemo cum tenetur earum. Suscipit ea enim consequuntur vero totam, impedit veritatis.</p>
    </div>
    <h5>What is the second question?</h5>
    <div class="accordion_text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci natus quas quod doloremque, dolore aliquid, blanditiis eligendi nemo cum tenetur earum. Suscipit ea enim consequuntur vero totam, impedit veritatis.</p>
    </div>
    <h5>And the third?</h5>
    <div class="accordion_text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci natus quas quod doloremque, dolore aliquid, blanditiis eligendi nemo cum tenetur earum. Suscipit ea enim consequuntur vero totam, impedit veritatis.</p>
    </div>
</div>

<h2>Second accordion</h2>
<div class="accordion">
    <a class="toggle_open" id="button_toggle">Toggle all</a>
    <h5>Which is another question?</h5>
    <div class="accordion_text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci natus quas quod doloremque, dolore aliquid, blanditiis eligendi nemo cum tenetur earum. Suscipit ea enim consequuntur vero totam, impedit veritatis.</p>
    </div>
    <h5>What is the next-to-another question?</h5>
    <div class="accordion_text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci natus quas quod doloremque, dolore aliquid, blanditiis eligendi nemo cum tenetur earum. Suscipit ea enim consequuntur vero totam, impedit veritatis.</p>
    </div>
    <h5>Tell me about the last!</h5>
    <div class="accordion_text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci natus quas quod doloremque, dolore aliquid, blanditiis eligendi nemo cum tenetur earum. Suscipit ea enim consequuntur vero totam, impedit veritatis.</p>
    </div>
</div>

JS

.accordion {
  .accordion_text {
    display: none;
  }
}

    jQuery('document').ready(function(){

    /* Accordion for pages */

    var headers = jQuery('.accordion h5');
    var contentAreas = jQuery('.accordion_text').hide();
    var expandLink = jQuery('.toggle_open');

    // add the accordion functionality
    headers.click(function() {
        var panel = jQuery(this).next();
        var isOpen = panel.is(':visible');

        // open or close as necessary
        panel[isOpen? 'slideUp': 'slideDown']()
            // trigger the correct custom event
            .trigger(isOpen? 'hide': 'show');

        // stop the link from causing a pagescroll
        return false;
    });

    // hook up the expand/collapse all
    expandLink.click(function(){
        var isAllOpen = jQuery(this).data('isAllOpen');

        contentAreas[isAllOpen? 'hide': 'show']()
            .trigger(isAllOpen? 'hide': 'show');
    });

    // when panels open or close, check to see if they're all open
    contentAreas.on({
        // whenever we open a panel, check to see if they're all open
        // if all open, swap the button to collapser
        show: function(){
            var isAllOpen = !contentAreas.is(':hidden');   
            if(isAllOpen){
                expandLink.text('Hide all')
                    .data('isAllOpen', true);
            }
        },
        // whenever we close a panel, check to see if they're all open
        // if not all open, swap the button to expander
        hide: function(){
            var isAllOpen = !contentAreas.is(':hidden');
            if(!isAllOpen){
                expandLink.text('Collapse all')
                .data('isAllOpen', false);
            } 
        }
    });
}); 

---

您可以在

找到此代码示例，以下内容可能会对您有所帮助

您可以使用函数获取父级

.accordion

，然后使函数仅对子级生效

jQuery（'document'）.ready（函数（）{
/*手风琴*/
var headers=jQuery（'.accordion h5'）；
var contentAreas=jQuery（'.accordion_text'）.hide（）；
var expandLink=jQuery（'.toggle_open'）；
//添加手风琴功能
标题。单击（函数（）{
var panel=jQuery（this.next（）；
var isOpen=panel.is（':visible'）；
//根据需要打开或关闭
面板[isOpen？'slideUp'：'slideDown']（）
//触发正确的自定义事件
.trigger（等参线？'hide'：'show'）；
//阻止链接导致页面滚动
返回false；
});
//连接展开/折叠所有
expandLink.单击（函数（）{
var isAllOpen=jQuery（this）.data（'isAllOpen'）；
$（this）.closest（'.accordion'）.find（contentAreas）[isAllOpen？'hide'：'show']（）
.trigger（isAllOpen？'hide'：'show'）；
});
//当面板打开或关闭时，检查它们是否全部打开
内容区({
//每当我们打开一个面板，检查它们是否都打开了
//如果全部打开，将按钮切换到折叠器
show:function（）{
var isAllOpen=！$（this）.is（“：hidden”）；
如果（isAllOpen）{
$（this）.最近（'.accordion'）。查找（'.toggle_open'）。文本（'Hide all'））
.数据（'isAllOpen'，true）；
}
},
//每当我们关闭面板时，检查它们是否全部打开
//如果不是全部打开，则将按钮切换到扩展器
隐藏：函数（）{
var isAllOpen=！$（this）.is（“：hidden”）；
如果（！isAllOpen）{
$（this）.最近（'.accordion'）。查找（'.toggle_open'）。文本（'Collapse all'））
.数据（'isAllOpen'，false）；
}
}
});
});
手风琴{
.手风琴{
显示：无；
}
}

第一手风琴
全部切换
第一个问题是什么？
Lorem ipsum dolor sit amet，奉献精英。最起码的一点是，我们需要的是一种流动性，一种非流动性，一种非物质性的物质。这是一个严重的问题，阻碍了真理

第二个问题是什么？
Lorem ipsum dolor sit amet，奉献精英。最起码的一点是，我们需要的是一种流动性，一种非流动性，一种非物质性的物质。这是一个严重的问题，阻碍了真理

第三个呢？
Lorem ipsum dolor sit amet，奉献精英。最起码的一点是，我们需要的是一种流动性，一种非流动性，一种非物质性的物质。这是一个严重的问题，阻碍了真理

第二手风琴
全部切换
那是另一个问题？
Lorem ipsum dolor sit amet，奉献精英。最起码的一点是，我们需要的是一种流动性，一种非流动性，一种非物质性的物质。这是一个严重的问题，阻碍了真理

下一个问题是什么？
Lorem ipsum dolor sit amet，奉献精英。最起码的一点是，我们需要的是一种流动性，一种非流动性，一种非物质性的物质。这是一个严重的问题，阻碍了真理

告诉我最后一个！
Lorem ipsum dolor sit amet，奉献精英。最起码的一点是，我们需要的是一种流动性，一种非流动性，一种非物质性的物质。这是一个严重的问题，阻碍了真理