通过预览文本创建自定义手风琴效果

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

我的脚本已接近完成，但我仍然遇到一些问题：

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

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

这是我的代码和jfiddle：

http://jsfiddle.net/PPjFS/

 
 Item 1 
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 
 
 
 Item 2 
 
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.
 
 
 
 Item 3 
 
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.
 
 
 
  $("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); } });  

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

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/

我会在第一个答案下面对此进行评论，但由于“声誉”而不允许这样做。 Sry做出新答案。