Question

我已尽力做到这一点，......我花了好几个小时才能让它发挥作用。单击readmore时，它会隐藏摘录并显示完整内容，然后将按钮重新命名为HIDE，然后再次单击隐藏时，它必须再次显示摘录并隐藏完整内容。

这是我的fiddle

jQuery代码

jQuery(document).ready(function () {
    jQuery('.testi-more').click(function (e) {
        e.preventDefault();
        var same = jQuery(this).closest('.testi-wrapper');
        jQuery(this).closest('.testi-wrapper').children('.testi-full').slideToggle('slow');
    });

    if (jQuery('.testi-full').is(": hidden")) {
        jQuery(this).closest('.testi-wrapper').children('.testi-excerpt').show();
        jQuery(this).closest('.testi-wrapper').children('.testi-more').html('Read moar');
    } else {
        jQuery(this).closest('.testi-wrapper').children('.testi-excerpt').hide();
        jQuery(this).closest('.testi-wrapper').children('.testi-more').html('Hide');
    }
});

请优化我的代码然后解释原因，以便我可以研究它。谢谢！

Answer 1

这就是你要找的东西

jQuery(function($) {
    $('.testi-more').on('click', function(e) {
        e.preventDefault();
        $(this).text(function(_,txt) {
            return txt == 'Read more' ? 'Hide' : 'Read more';
        }).closest('.testi-wrapper').children('.testi-full')
          .slideToggle('slow').end().children('.testi-excerpt').slideToggle();
    });
});

FIDDLE

它切换滑动，它还使用回调切换文本，其中检查当前文本，并根据当前文本的内容返回另一个文本等。

隐藏摘录并在重新切换时重新显示

1 个答案: