jQuery：animate addClass（） - 展开容器？

以下问题：我有一个很多文本的简单段落，我只想要第一行显示。所以实际上是一种传情。当点击第一行时，段落应该动画到它的全高（和宽度）。现在，我通过删除collpsed类这样做......jQuery：animate addClass（） - 展开容器？

<p class="collapsed">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

的jQuery：

$('p.collapsed').click(function() { 
    $(this).removeClass('collapsed').addClass('expanded'); 
    $(this).append("<a href='#' class='closer'>×</a>"); 
}); 

$('a.closer').click(function(e) { 
    $(this).remove(); 
    $('p.expanded').removeClass('expanded').addClass('collapsed'); 
});

我也想有附加封闭元件时段落是这样展开我可以再次崩溃它。看看我的小提琴 - http://jsfiddle.net/3J2g7/

的几个问题：

1）现在我根本不明白为什么a.closer附加每当我点击段落。它应该只附加一次，因为我点击它时删除了类collapsed，所以它不应该再次触发append（），对吧？

2.）任何想法为什么a.closer元素在点击时不会被删除？

3.）是否有一些奇特的方式来动画整个体验。例如。我只是喜欢在点击它时滑动段落的剩余部分，点击靠近时再次滑动（）。

4.）我不知道的最后一件事是为什么我不能在折叠的段落中添加三个点作为一个小提示，所以有更多的文本，我尝试了这么使用：在p后，但不起作用！

来源

2012-02-06 matt

您应该一次询问一个问题。不是四。希望我的回答有帮助。 – gdoron 2012-02-06 09:06:01

你改变DOM，所以你必须使用委托事件附加像on：

更新代码：

$(function() { 
    $('body').on('click', 'p.collapsed', function() { 
     $(this).removeClass('collapsed').addClass('expanded') 
       .hide().slideDown('fast'); 
     $(this).append("<a href='#' class='closer'>×</a>"); 
    }); 

    $('body').on('click', 'a.closer', function(e) { 
     $(this).remove(); 
     $('p.expanded').slideUp('fast', function() { 
      $(this).removeClass('expanded').addClass('collapsed').show(); 
     }); 
    }); 
});

代替body给选择器containts p.collapsed最接近的元素和a.closer。

3.）有没有一些幻想的方式来动画整个体验。

是的，我以前hide + slideDown('fast')和slideUp('fast') + show为更好的用户体验。

JSFiddle DEMO

来源

2012-02-06 08:56:06 gdoron

完美，谢谢。我只是想知道是否有一种简单的方法可以在崩溃时使用动画？我正在尝试，但似乎无法找到一个简单的解决方案。无论如何，谢谢你，完美！ – matt 2012-02-06 09:17:03

是的，我看到它使用slideDown进行动画处理，但在再次关闭时不会生成动画，是吗？ – matt 2012-02-06 09:23:07

@Matt。好。再加上... =）再次检查DEMO ... – gdoron 2012-02-06 09:24:15

1）现在我根本不知道为什么每当我点击段落a.closer追加。它应该只附加一次，因为我在点击它时删除了折叠的类，所以它不应该再次激发 append（），对不对？

这是因为每次单击关闭链接时都会执行{$（this）.append（“×”）;}。

是否有任何特殊原因要在每次展开/折叠div时添加和移除链接？。为什么不只是加载它或更好地将它添加到HTML并让它成为？

所以，你的代码看起来像http://jsfiddle.net/azy777/EqDm9/10/

2）任何想法，为什么它点击时a.closer元素不会被删除？

因为要动态添加元素，所以你需要使用live或on或delegate

3）绑定事件是否有动画整个体验一些花哨的方式。例如。我只是喜欢slideDown（）在点击它和单击靠近时再次滑动（）时段落的其余部分。

是啊，看看animate

4）我不知道的最后一件事就是为什么我不能三个点追加到塌陷段落作为一个小提示，以便有更多的文字，我试过这么用：在p后，但不起作用！

检查这个fiddle，你需要添加一个额外的元素（这里使用的跨度），并根据需要隐藏/显示。

希望这会有所帮助。

来源

2012-02-06 09:31:46 azy777

jQuery：animate addClass（） - 展开容器？

回答

相关问题