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');
            }
        });
    });

手风琴简单多个jQuery

1 个答案: