Question

我正在尝试使用jQuery创建自定义手风琴效果，其中“折叠”项目显示每个项目中的第一行文本。当用户单击其中一个项目时，它应设置为显示全文的动画;与普通手风琴的功能非常相似，除了我希望我的文本有一点点预览。

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

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

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

这是我的代码和jfiddle：

<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

如果项目已处于活动状态并再次点击，则该项目不应该崩溃。

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

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

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

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

...

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

我已更新了您的fiddle：

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

我会在第一个答案中对此进行评论，但由于“声誉”而不允许这样做。为了得到一个新答案而勉强。

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

2 个答案: