javascript - 阅读更多 显示额外内容

标签 javascript jquery html

我正在寻找解决方案。例如,在这支笔( codepen )中显示了阅读更多和阅读更少。但是我怎样才能在内容中使用 html 标签来实现这一点呢?

例如,在more类中我设置了<p>在另一个类中,我有一个元素关闭 </p>

<span class="more">
  Lorem ipsum dolor sit amet, consectiusmod tempor <p> Lorem sdfd sf dds sd sd
</span>
<br><br>
<div class="more">
  Morbi placerat </p> imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
</div>

最佳答案

也许不是解决问题的最佳方法,但我之前在项目中遇到过,我是这样做的:

单击按钮启动此脚本:

$(".more2").contents().appendTo('.more1')

您的 HTML 可以如下所示:

<span class="more1">
  Lorem ipsum dolor sit amet, consectiusmod tempor <p> Lorem sdfd sf dds sd sd
</span>
<br><br>
<div class="more2">
  Morbi placerat </p> imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
</div>

关于javascript - 阅读更多 显示额外内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43610264/

相关文章:

javascript - 如何隐藏html表格中的元素

jquery - 开设一门类(class),关闭其他类(class)

javascript - Chrome HTML5 视频缓冲

javascript - 包装 nside td 在 jQuery 中不起作用

javascript - 谷歌图表 : “Uncaught (in promise) Error: Unknown header type: 4.7278” error

javascript - D3 中的选择,Jquery

jquery - MongoDB 相当于 SQL "TOP"

javascript - 鼠标悬停后自动播放视频不起作用

JavaScript 错误 "SyntaxError: Unexpected token &&"

javascript - 尝试将 Prop 绑定(bind)到 v-model