javascript - jQuery:动画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');
});

我还想在展开段落时附加一个close元素，以便再次折叠它。看看我的小提琴-http://jsfiddle.net/3J2g7/

一些问题：

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

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

3.）是否有某种花哨的方法可以使整个体验动起来。例如。我只想在单击该段落的其余部分时使用slideDown（），在单击关闭器时再次使用slideUp（）。

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

最佳答案

您正在更改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

Closer

javascript - jQuery:动画addClass()-展开容器？