手風琴簡單多個jQuery

Question

我有以下手風琴乍一看工作正常，但當你關閉或點擊標題（h3）所有關閉，而不是pertener。

這是一種隔離每個獨立於其他手風琴的手風琴的方法。

HTML：

<div class="accordion">
     <h3>Lorem 1</h3>

    <div>Text-1</div>
     <h3>Lorem 2</h3>

    <div>Text-2</div>
     <h3>Lorem 3</h3>

    <div>Text-3</div>
</div>
<div class="accordion">
     <h3>Lorem 6</h3>

    <div>Text-6</div>
     <h3>Lorem 7</h3>

    <div>Text-7</div>
     <h3>Lorem 8</h3>

    <div>Text-8</div>
</div>
<div class="accordion">
     <h3>Lorem 12</h3>

    <div>Text-12</div>
     <h3>Lorem 13</h3>

    <div>Text-13</div>
     <h3>Lorem 14</h3>

    <div>Text-14</div>
</div>

JQUERY：

    $(".accordion").each(function () {
        $(this).find("h3:first").addClass('active').next().slideDown('slow');
        $(this).find("h3").click(function () {
            if ($(this).next().is(':hidden')) {
                $('.accordion h3').removeClass('active').next().slideUp('slow');
                $(this).toggleClass('active').next().slideDown('slow');
            }
        });
    });

示例： http ： //jsfiddle.net/3y1b58hh/

Answer 1

你正在調用$（。accordion h3），它沒有連接到$（this）並將觸發所有.accordion。 采用：

        $(".accordion").each(function () {
        $(this).find("h3:first").addClass('active').next().slideDown('slow');
        $(this).find("h3").click(function () {
            if ($(this).next().is(':hidden')) {
                  $(this).parent().find("h3").removeClass('active').next().slideUp('slow');
                $(this).toggleClass('active').next().slideDown('slow');
            }
        });
    });