使用文本预览创建自定义手风琴效果 [英] Creating a custom accordion effect with preview of text

问题描述

我正在尝试使用jQuery创建自定义手风琴效果，其中折叠"项显示每个项中的第一行文本.当用户单击其中一项时，它应设置动画以显示全文；几乎与普通手风琴的运行方式相同，只是我希望我的文本预览很少.

I'm trying to create a custom accordion effect with jQuery, where the 'collapsed' items show the first line of text within each item. When the user clicks one of the items, it should animate to show the full text; very much the same way as an ordinary accordion would function, except I would like mine to have that little preview of text.

我的脚本快要完成了，但仍然有一些问题:

My script is nearly complete but I'm still having a couple of issues:

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

我该怎么做才能完成脚本?

What can I do to complete the script?

这是我的代码和一个小提琴:

Here's my code and a 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>

推荐答案

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

the item shouldn't collapse if it is already active and clicked again.

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

You should check if item active before collapsing it

动画一次接一个发生，但我希望它们同时发生.

the animations happen one after the other but I would like them to occur at the same time.

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

because you are running 2 animations on same element, so they queued

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

这篇关于使用文本预览创建自定义手风琴效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！