0

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

我的脚本几乎完成了，但我仍然有几个问题：

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

我可以做些什么来完成脚本？

这是我的代码和一个 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 回答