0

「折りたたまれた」アイテムが各アイテム内のテキストの最初の行を表示する、jQuery を使用してカスタム アコーディオン効果を作成しようとしています。ユーザーがアイテムの 1 つをクリックすると、アニメーション化されて全文が表示されます。通常のアコーディオンとまったく同じように機能しますが、テキストの小さなプレビューが必要です。

私のスクリプトはほぼ完成していますが、まだいくつかの問題があります。

  • アイテムが既にアクティブで再度クリックされた場合、アイテムは折りたたまれるべきではありません。
  • アニメーションは次々に発生しますが、同時に発生させたいと思います。

スクリプトを完了するにはどうすればよいですか?

これが私のコードとjfiddleです：

http://jsfiddle.net/PPjFS/

<ul>
    <li>
        <span>Item 1</span>
        <div>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
    </li>
    <li>
        <span>Item 2</span>
        <div>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
    </li>
    <li>
        <span>Item 3</span>
        <div>
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
    </li>    
</ul>

<script type="text/javascript">
    $("span").click(function(){
        var h = $(this).siblings("div").find("p").height();

        $("ul li div").animate({height:"20px"}, 100);

            if( !$(this).hasClass("active") ){
                $(this).addClass("active");
                $(this).siblings("div").animate({height: h+10 + "px"}, 200);
            }   
        });
</script>
4

2 に答える 2

1

アイテムが既にアクティブで再度クリックされた場合、アイテムは折りたたまれるべきではありません。

折りたたむ前にアイテムがアクティブかどうかを確認する必要があります

アニメーションは次々に発生しますが、同時に発生させたいと思います。

同じ要素で2つのアニメーションを実行しているため、それらはキューに入れられました

    $("ul li div").animate({height:"20px"}, 100);

...

    $(this).siblings("div").animate({height: h+10 + "px"}, 200);

私はあなたのフィドルを更新しました：

$(function(){
    var container = $('ul');

    container.find("span").click(function(){
        var li = $(this).closest('li')
        if (li.hasClass("active")) return;

        var h = li.find("div").find("p").height(),
            active = container.find('li.active');

        active.find('div').animate({height:"20px"}, 100);
        li.find("div").animate({height: h+10 + "px"}, 200);
        active.removeClass('active');
        li.addClass("active");
    });
});
于 2013-10-25T09:25:21.777 に答える
0

タイトルが再度クリックされるまでアコーディオンが開いたままになるバージョンをフォークしました。

$(function(){
    var container = $('ul');

    container.find("span").click(function(){
        var li = $(this).closest('li')
        if (li.hasClass("active")) {

            $(li).find('div').animate({height:"20px"}, 100);
            $(li).removeClass("active");
        }

        else {

            var h = li.find("div").find("p").height(),
            active = container.find('li.active');

            li.find("div").animate({height: h+10 + "px"}, 200);
            li.addClass("active");
        };
    });
});

ここで見つけることができます: http://jsfiddle.net/jaakkokarhu/6nm48jb1/1/

最初の回答の下にコメントしたはずですが、「評判」のために許可されませんでした。新しい答えを作ってくれてごめんなさい。

于 2015-02-19T09:28:41.643 に答える