使用文本预览创建自定义手风琴效果

Question

我试图用jQuery创建一个自定义手风琴效果，其中“折叠”项显示每个项目中的第一行文本。当用户点击其中一个项目，它应该动画显示全文；非常类似的方式，普通手风琴将发挥作用，但我希望我的小预览文本。

我的脚本已经接近完成，但我仍然有几个问题：

• 如果该项目已处于活动状态并再次单击，则不应折叠。
• 动画是一个接一个地发生的，但我希望它们同时发生。

我能做些什么来完成剧本？

这是我的代码和小提琴：

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>

Answer 1

如果该项目已处于活动状态并再次单击，则不应折叠。

在折叠项目之前，应该检查它是否处于活动状态。

动画是一个接一个地发生的，但我希望它们同时发生。

因为您在同一元素上运行两个动画，所以它们排队。

    $("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");
    });
});

Answer 2

我用叉子将手风琴打开，直到再次点击标题：

$(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/

我会在第一个答案下面对此发表评论，但由于“声誉”而不被允许。做一个新的答案。