Question

我在div中有一堆段落，其中一段有 read_more 链接。默认情况下隐藏同一div中 read_more 链接之后的所有段落。

点击 read_more 后，会显示read_more之后的所有段落，并在最后一段末尾添加 read_less 链接。点击read_less后，它会隐藏所有段落，直到read_more，再次显示 read_more 链接并隐藏自己。

我快到了，请在此处查看：http://jsfiddle.net/g8tevwb1/

$('p').find('a.read_more').parent().nextAll().hide();

$('a.read_more').click(function(){
    $(this).parent().nextAll().show();
    $(this).parent().nextAll('p').last().append('<a href="#" class="read_less">read less</a>');
    $(this).hide();
    return false;
});

$('a.read_less').click(function(){
    $(this).parent().prevUntil('a.read_more').hide();
    $(this).hide();
    return false;
});

我只是无法让 read_less 正常工作。我是否做错了以这种方式附加read_less链接？我可以操纵它，改变颜色等，但点击功能不起作用。

重要的是所有这一切都发生在包含它们的div中，因为我在其他div中有其他段落和其他read_more按钮，我不希望它们受到影响。

感谢任何帮助！

Answer 1

由于read_less链接是动态添加的，因此您必须使用jQuery .on()方法。

$('p').find('a.read_more').parent().nextAll().hide();

$('p').on('click', 'a.read_more', function(){
    $(this).parent().addClass('first');
    $(this).parent().nextAll('p').last().append('<a href="#" class="read_less">read less</a>');
    $(this).parent().nextAll().show();
    $(this).hide();
    return false;
});

$('p').on('click', 'a.read_less', function(){
    $(this).parent().prevUntil('p.first').andSelf().hide();
    $('a.read_more').show();
    $(this).remove();
    return false;
});

Fiddle

我还纠正了read_less点击回调中的小错误。我认为这是你想要的行为。这里有post与动态添加的元素相关。

注意

如果不是严格要求，您可以避免动态添加和删除read_less链接。这将简化您的代码，如下所示

$('p').find('a.read_more').parent().nextAll().hide(); $('a.read_more').click(function(){ $(this).parent().addClass('first'); $(this).parent().nextAll().show(); $(this).hide(); return false; }); $('a.read_less').click(function(){ $(this).parent().prevUntil('p.first').andSelf().hide(); $('a.read_more').show(); return false; });

<强> Fiddle

使用jquery正确地将paragraph_more / read_less链接添加到段落

1 个答案: