求教大佬如何实现个人博客里的长代码的折叠效果？博客是typecho的，请问有相关代码或者插件吗？ - 大佬论坛 大佬论坛

求教大佬如何实现个人博客里的长代码的折叠效果？博客是typecho的，请问有相关代码或者插件吗？

陶小桃呀  (UID: 3271) [复制链接]
帖子链接已复制到剪贴板
帖子已经有人评论啦，不支持删除！
2174 4

类似这种，点击后展开。

这家伙太懒了，什么也没留下。
已有评论 ( 4 )
  • 头像
    tom (UID: 3123)
    1楼

    推荐这个最简单的实现（要实现如图先展示一部分内容的效果可能得绕一下 = =）：

    ```html
    <details>
      <summary style="color:blue;">
        点击查看代码示例
      <summary>
      <blockquote>
         let name = "tom";
      </blockquote>
    </details>
    ```

     

  • 头像
    gogobody (UID: 3047)
    2楼
    首先，你要显示的代码块，假设最外层是一个div，它有个高度，也就是实际高度，假设是  800px，那么你可以手动设置这个div  的高度，整成500px  css  div{height:500px}  。这时候你有另一个按钮，有一个点击事件，点击之后把  div  的height设置为100%就好了
  • 头像
    赵阿卷 (UID: 3152)
    3楼
    <details>标签，你值得拥有
  • 头像
    zxz (UID: 3000)
    4楼
    赵阿卷 标签，你值得拥有
    真实哈哈
域名市场
   域名载入中...
创建新帖
自助推广购买广告位
确认删除
确定要删除这篇帖子吗？删除后将无法恢复。
删除成功
帖子已成功删除，页面将自动刷新。
删除失败
删除帖子时发生错误，请稍后再试。