我需要能够隐藏/显示基于用户单击链接的任意内容（段落、列表，可能是图片）。这很容易，但我在试图将其添加到段落中间时遇到了很多问题。
我们正在尝试在页面的某些部分提供“阅读更多”类型的链接。它需要能够从文本段落的任何地方开始。我用一个<span> 标记，但这会导致问题，因为要隐藏的内容范围可能必须包含多个段落、列表等，因此WordPress在第一段末尾关闭范围，以使其成为有效的HTML，这很有意义。
接下来，我尝试添加<div> 标记，然后在我的样式表中内联div，但WordPress在我添加div文本之前关闭了该段落，这也是有效的HTML。
有人对如何做到这一点有什么建议吗？我不想删除WordPress自然添加的<p> 标记，因为我预计将更新站点的人不会希望进入代码视图并添加段落标记。
我使用的HTML是：
<strong>What is community acupuncture?</strong> Here is the text that will show
before the hidden section<div class="hidden-text"> Here is the rest of the paragraph
in the hidden section.</p>
<p>Here is another paragraph of text that needs to be hidden. I realize that it is
not valid HTML to have a div tag start in the middle of one paragraph and then encase
a couple more paragraphs or a list or whathaveyou, which is why I am wondering how
anyone else handled this issue.</p></div>
我将此作为我的css：
.hidden-text {
display: inline;
}
到目前为止，我的小jquery如下所示：
$(\'.hidden-text\').before("...").hide().after("<a href=\'#\' class=\'hidden-text-toggle\'>Read More</a>");
我不确定我在这里发布这个是否更好，因为这个问题与
<p> 正在添加标签，或者最好将其发布在网站的前端设计部分。
SO网友:cjbj
您尝试执行的操作的问题是分割了一个块类型的html元素<p>. 在您的示例中，您有效地<p><div></p></div>, 这根本不好。所以你不能混在一起<p> 和<div> 以这种方式。但是，您可以使用段落和类的组合：
<p>Text</p><p class="hide-from-here">More text</p>
可以方便地进行扩展
</p><p class="hide-from-here"> 来自短代码。您还可以使用相同的短代码生成链接。您可以确保段落带有
hide-from-here 类的行为就像使用css时它不存在一样。
现在您仍然需要隐藏其余段落。这里是jquery.nextAll 可以方便地为类中的所有剩余段落提供
$("p:hide-from-here").nextAll().addClass( "following-paragraphs" );
在此类上定义
display:hidden, 使用链接切换（或删除类）。
