javascript - 标记隐藏内容稍后通过 Javascript 显示

Question

我有一些这样的段落:

<p>Is your organization prepared for a crisis? Most professional service firms have a process for dealing with the media. There are systems in place for sending out press releases, issuing <a>READ MORE</a> firm communications and setting up interviews.</p>

<p>Is your organization prepared for a crisis? Most professional service firms have a process for dealing with the media. There are systems in place for sending out press releases, issuing firm communications and setting up interviews.</p>

在我阅读更多内容的地方，我希望隐藏所有后续文本，然后当我使用 Javascript 激活链接时它将显示。我本来打算在该段落的其余文本周围放置一个带有 class="hiddencontent"的 SPAN 或其他内容，但现在我意识到，因为我有第一段的其余部分，加上整个第二段，推荐的方式是什么标记这个？显然，单个 SPAN 元素不能属于两个不同的段落。

请注意，此页面上会有多个这样的 READ MORE 段落，因此我不能只做一个全面的 $('.hiddencontent').show();页面中的所有内容。

谢谢!

Answer 1

我只需将相关段落包装在 div 等元素中，创建一个隐藏类(例如 .hidden)并将该类应用于您想要隐藏的任何内容。最简单的方法是将链接后面的文本包装在一个跨度中，并将隐藏类应用于该跨度及其后面的段落，如下所示:

<div>
    <p>Is your organization prepared for a crisis? Most professional service firms have a process for dealing with the media. There are systems in place for sending out press releases, issuing <a>READ MORE</a><span class="hidden"> firm communications and setting up interviews.</span></p>
    <p class="hidden">Is your organization prepared for a crisis? Most professional service firms have a process for dealing with the media. There are systems in place for sending out press releases, issuing firm communications and setting up interviews.</p>
</div>

你可以使用这个 jQuery 来显示“额外的”

$('a').click(function () {
    $(this).closest('div').find('.hidden').toggle()
})

<强> jsFiddle example