Question

我是jquery的初学者。下面是我在教程的帮助下为基本手风琴提出的代码：

$(document).ready(function() {
           $('.reAccord > .accTitle').each(function(index){
               $('.accContainer').hide();   
               $('.accTitle:first').next().slideDown();
               $(this).click(function() {
                    if ($(this).next().is(':hidden')) {
                        $('.accTitle').next().slideUp();
                        $(this).next().slideDown();
                    }
                    return false;

                   });
           });

        });

但问题是如果我复制html在同一页面中有两个单独的手风琴，只有手风琴1中的第一个元素处于活动状态，而手风琴二中的第一个元素才会折叠。我应该做些什么改变来保持手风琴的每个单独副本的第一个链接打开。我还必须使用 .each（function（index）{}）; ：

 <!-- accordion 1 -->
        <div class="reAccord">
            <h2 class="accTitle"><a href="#">Accordion one</a></h2>
            <div class="accContainer">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac                    turpis egestas.</p>
            </div>
            <h2 class="accTitle"><a href="#">Accordion Two</a></h2>
            <div class="accContainer">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac                    turpis egestas.</p>
            </div>
            <h2 class="accTitle"><a href="#">Accordion Three</a></h2>
            <div class="accContainer">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac                    turpis egestas.</p>
            </div>
            <h2 class="accTitle"><a href="#">Accordion Four</a></h2>
            <div class="accContainer">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac                    turpis egestas.</p>
            </div>
        </div> <!--reaccord-->
        <!-- accordion 2 -->
        <div class="reAccord">
            <h2 class="accTitle"><a href="#">Accordion one</a></h2>
            <div class="accContainer">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac                    turpis egestas.</p>
            </div>
            <h2 class="accTitle"><a href="#">Accordion Two</a></h2>
            <div class="accContainer">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac                    turpis egestas.</p>
            </div>
            <h2 class="accTitle"><a href="#">Accordion Three</a></h2>
            <div class="accContainer">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac                    turpis egestas.</p>
            </div>
            <h2 class="accTitle"><a href="#">Accordion Four</a></h2>
            <div class="accContainer">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac                    turpis egestas.</p>
            </div>
        </div> <!--reaccord-->

Answer 1

使用此：

$('.reAccord').each(function(index){
    $el = $(this);
       $(this).find('.accTitle').each(function(index){
           $(this).next('.accContainer').hide();   
           $el.find('.accTitle:first').next().slideDown();
           $(this).click(function() {
                if ($(this).next().is(':hidden')) {
                    $(this).parent().find('.accContainer').slideUp();
                    $(this).next('.accContainer').slideDown();
                }
                return false;

               });
       });

    });

https://jsfiddle.net/6Lnnw6jd/1/

如何保持每个手风琴的第一个链接打开，同时在同一页面中有两个相同的手风琴副本

1 个答案: