jQuery：动画 addClass() - 扩展容器？答案

【问题标题】：jQuery: animate addClass() - expand container?jQuery：动画 addClass() - 扩展容器？
【发布时间】：2012-02-27 18:38:18
【问题描述】：

以下问题：我有一个包含大量文本的简单段落，我只希望第一行出现。所以实际上有点像预告片。单击第一行时，段落应该动画到它的全高（和宽度）。现在我正在通过删除折叠的类来做到这一点......

<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.) 是否有一些奇特的方式来为整个体验设置动画。例如。我只是喜欢在单击该段落时将其剩余部分 slideDown() 并在单击更近时再次 slideUp() 。

4.) 我不知道的最后一件事是为什么我不能在折叠的段落上附加三个点作为一个小提示，以便有更多的文本，我尝试在 p 上使用 :after，但不起作用！

【问题讨论】：

你应该一次问一个问题。不是四个。希望我的回答有所帮助。

标签： javascript jquery collapse

【解决方案1】：

您正在更改 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，为选择器提供包含p.collapsed 和a.closer 的最接近的元素。

3.) 是否有一些奇特的方式来为整个体验设置动画。

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

JSFiddle DEMO

【讨论】：

完美，谢谢。我只是想知道是否有一种简单的方法来制作折叠动画？我现在正在尝试，但似乎找不到简单的解决方案。无论如何，谢谢你，太完美了！
是的，我看到它正在使用 slideDown 制作动画，但在再次关闭时没有动画，是吗？
也可以将removeClass/addClass 代码缩短为：$(this).toggleClass('collapsed expanded')，只要在元素上预定义了其中一个类。

【解决方案2】：

1.) 现在我根本不明白为什么每次单击该段落时都会附加 a.closer。它应该只附加一次，因为我删除单击时折叠的类，因此它不应该触发又是 append() 对吧？

这是因为每次点击关闭链接时都会执行 { $(this).append("×");} 。

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

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

2.) 知道为什么单击 a.closer 元素时没有删除它吗？

因为您是动态添加元素，所以需要使用live 或on 或delegate 绑定事件

3.) 是否有一些奇特的方式来为整个体验设置动画。例如。我只是喜欢在单击时滑动该段落的其余部分单击关闭器时，它和 slideUp() 再次。

是的，请查看animate

4.) 我不知道的最后一件事是为什么我不能在折叠的段落上附加三个点作为一个小提示，所以有更多的文字，我尝试在 p 上使用 :after，但不起作用！

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

希望这会有所帮助。

【讨论】：