js实现展开全部内容，收起全部内容

最新推荐文章于 2024-06-28 22:39:15 发布

撸猫@冒泡泡

最新推荐文章于 2024-06-28 22:39:15 发布

阅读量5.5k

点赞数 1

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/github_37553763/article/details/105998363

版权

这篇博客介绍了如何在移动端页面中实现一个内容过多时的显示策略。内容以预览形式展示，用户可以选择是否查看全部。通过JavaScript控制，设置最大显示字数，点击后展开全部内容。提供了HTML和JS部分的代码示例。

摘要由CSDN通过智能技术生成

整理一个昨天做的案例，虽然很简单我感觉我这个脑子有必要整理一下，不然睡一觉又忘记了，这个是关于移动端页面中，如果模块中内容过多，首先展示部分，用户自己选择看不看全部的一个小功能。

首先看看这个页面的效果吧，如下图所示：
在这里插入图片描述
下面一起来看一下代码吧

html部分（css样式就不在这里写了，需要自行下载）

<div class="con">
    <p class="intro_title">就让我们，晚点在一起。然后一辈子。</p>
    <p class="intro_content more_h">
        不需要晚多久，就再过那么几年，那时我们有稳定的收入，靠谱的工作，所有的一切步入正轨、我不再是一个追梦的漂浮的女生，而是一个只寻求安稳生活的女人，你不再是一个青涩的毛头小伙子，而是一个成熟的男人。
        <br />
        到那个时候，我们在相爱、
        <br />
        如果，我们可以晚一些相遇。<br />
        不需要多久，就在过那么几年，那时候我们已经学会了知足学会了包容和珍惜，而你也真的能从容的面对那些不追逐你的异性、
        <br />
        到那时候，那时候我们在相爱、