0

我正在尝试使一些添加的段落文本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>

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

4

1 回答 1

0

使用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因为我在提供的 HTML 代码中teaser找不到类comment-teaser

于 2013-10-21T17:58:45.563 回答