Question

我正在尝试添加一些段落文本slideDown。我在一个页面上有很多段落，其中有一个简短的预告片，然后是“...阅读更多”当用户点击阅读更多链接时，我希望阅读更多链接消失，并通过“显示其余文本”关闭“底部的链接，点击时会滑动以显示文本的第一位，等等。我在Drupal工作，所以我没有完全控制结构，但我确实有很多。

JS：

$('a.views-more-link').click(function (e) {
    e.preventDefault();
    $(this).hide();
    $(this).parent().find('.comment-teaser').hide();
    $(this).next('.show-text').slideDown('slow');
});

$('.close-link a').click(function (e) {
    e.preventDefault();
    $(this).parent().parent('.show-text').slideUp('400');
    $(this).parent().parent().parent().find('.comment-teaser').css("display", "inline");
    $('a.views-more-link').css("display", "inline");
});

HTML：

<td>
    <span class="teaser">teaser...</span>
    <a href="#" class="views-more-link">more</a>
    <div class="show-text">full text...
        <br />
        <span class="close-link">
            <a href="#">close</a>
        </span>
    </div>
</td>

这基本上有效，但我不喜欢这些动画。它一开始就很跳跃，因为我必须隐藏预告片，然后全文跳到它的位置，然后向下滑动。关闭它甚至更糟糕，因为段落在滑动之前暂时打开比实际文本更宽。我想知道是否有更好的方法（可能有）。

Answer 1

使用closest()代替多个parent()或parents()

$('a.views-more-link').click(function (e) {
  e.preventDefault();
  $(this).hide();
  $(this).parent().find('.comment-teaser').hide(); //also here looks like it should be  teaser only
  $(this).next('.show-text').slideDown('slow');
});

$('.close-link a').click(function (e) {
  e.preventDefault();
  $(this).closest('.show-text').slideUp('400');
  $(this).parents('td').find('.comment-teaser').css("display", "inline");
  $('a.views-more-link').css("display", "inline");
});

是comment-teaser还是teaser因为我在提供的HTML代码中找不到comment-teaser类

slideUp-slideDown无法正常工作

1 个答案: