Question

以下问题：我有一个带有大量文字的简单段落，我只希望第一行出现。所以实际上是一种预告片。单击第一行时，段落应为其全高（和宽度）设置动画。现在，我通过移除已解决的类...

来这样做

<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所以它不应该再次触发追加（），对吗？

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

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

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

Answer 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

Answer 2

1。）现在，我只是不明白为什么每当我点击段落时附加a.closer。它应该只附加一次，因为我单击它时删除折叠的类，以便它不会触发再次追加（），对吧？

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

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

因此，您的代码看起来像http://jsfiddle.net/azy777/EqDm9/10/

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

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

来绑定事件

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

是的，请查看animate

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

选中此fiddle，您需要添加一个额外的元素（此处使用的跨度）并根据需要隐藏/显示。

希望这有帮助。

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

2 个答案: