slideUp-slideDown не работает должным образом

Question

slideUp-slideDown не работает должным образом

0

Я пытаюсь сделать добавленный текст абзаца slideDown. У меня есть несколько абзацев на странице с коротким тизером, за которым следуют "... читать дальше" Когда пользователь нажимает ссылку "Читать дальше", я бы хотел, чтобы прочитанная дополнительная ссылка исчезла и раскрыла остальную часть текста с помощью " закрыть "в нижней части, которая при нажатии будет slideUp, чтобы показать первый бит текста и т.д. Я работаю в 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>

Это в основном работает, но мне не нравятся анимации. Вначале это нервничает, потому что я должен скрыть тизер, а затем полный текст подпрыгивает до его положения, а затем скользит вниз. Закрытие еще хуже, поскольку параграф на мгновение открывается шире, чем фактический текст, прежде чем он соскользнет. и мне интересно, есть ли лучший способ (возможно, есть).

james 21 окт. 2013, в 20:35

Источник

0

А как насчет скользящего тизера вместо того, чтобы его скрывать?
Sebastian vom Meer 21 окт. 2013, в 17:58

Теги:

jquery

1 ответ

Ещё вопросы

А как насчет скользящего тизера вместо того, чтобы его скрывать?

bipen · Answer 1 · 2013-10-21T15-36-00.000Z

используйте 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 потому что я не могу найти класс comment-teaser в предоставленном HTML-коде

Это комментатор ... мой плохой. Я постараюсь ближайший ().