登录 注册

求一个折叠样式的代码片段（变态版）

总需求：

202410151257.png

有点复杂，以有序列表为例：

1. 折叠时，去除数字方框阴影

202410151252.png

另：无序列表的折叠阴影不用去除

202410151302.png

2. 只显示“‣”

20241015.png

3. 鼠标悬浮“‣”时，去除方框阴影、“折叠/展开”字样

202410151254.png

4. 折叠标题，去除方框（任我行主题，可以理解为“去除折叠状态标识”）

202410151305.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    23000 引用 • 92500 回帖 • 2 关注
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    8442 引用 • 38438 回帖 • 154 关注
10 回帖
5
4
209 123 85 1

相关帖子

被采纳的回答
  • wilsons • • 1
    付费者 捐赠者

    css 代码如下

    /* 有序列表，折叠时，去除数字方框阴影; 无序列表的折叠阴影不用去除 */
.protyle-wysiwyg [data-node-id].li[data-subtype="o"][fold="1"]>.protyle-action:after{
    background-color: transparent!important;
}
/* 只显示“‣” */
.protyle-gutters button[data-type="NodeList"] svg,
.protyle-gutters button[data-type="NodeListItem"] svg
{
    display:none;
}
/* 鼠标悬浮“‣”时去除方框引用 */
.protyle-gutters button:hover svg{
    background-color: transparent;
}
/* 折叠标题，去除方框（任我行主题，可以理解为“去除折叠状态标识”） */
.protyle-wysiwyg div[fold="1"]:not(div[data-type="NodeListItem"]){
    background-color: transparent;
    border:none;
}
/*  鼠标悬浮“‣”时，去除“折叠/展开”字样，css无法实现，见下面的js代码 */

    鼠标悬浮“‣”时，去除“折叠/展开”字样，css 无法实现，js 代码如下

    // 鼠标悬浮“‣”时，去除“折叠/展开”字样
(()=>{
    whenElementExist(".layout__center").then((element)=>{
        element.addEventListener('mouseover', async (e)=>{
            if(e.target.closest('button[aria-label="折叠/展开"]')){
                 const tooltip = await whenElementExist("#tooltip");
                 tooltip.remove();
            }
        });
    });
    function whenElementExist(selector) {
        return new Promise(resolve => {
            const checkForElement = () => {
                let element = null;
                if (typeof selector === 'function') {
                    element = selector();
                } else {
                    element = document.querySelector(selector);
                }
                if (element) {
                    resolve(element);
                } else {
                    requestAnimationFrame(checkForElement);
                }
            };
            checkForElement();
        });
    }
})();

    另外，你需求里提到的一级标题，我想你本意应该不是仅针对一级标题的样式吧，所以这里的样式和 js 会应用到 h1-h6 所有标题。

10 回帖
求一个折叠样式的代码片段（变态版）

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • wilsons • • 1
    付费者 捐赠者

    css 代码如下

    /* 有序列表，折叠时，去除数字方框阴影; 无序列表的折叠阴影不用去除 */
.protyle-wysiwyg [data-node-id].li[data-subtype="o"][fold="1"]>.protyle-action:after{
    background-color: transparent!important;
}
/* 只显示“‣” */
.protyle-gutters button[data-type="NodeList"] svg,
.protyle-gutters button[data-type="NodeListItem"] svg
{
    display:none;
}
/* 鼠标悬浮“‣”时去除方框引用 */
.protyle-gutters button:hover svg{
    background-color: transparent;
}
/* 折叠标题，去除方框（任我行主题，可以理解为“去除折叠状态标识”） */
.protyle-wysiwyg div[fold="1"]:not(div[data-type="NodeListItem"]){
    background-color: transparent;
    border:none;
}
/*  鼠标悬浮“‣”时，去除“折叠/展开”字样，css无法实现，见下面的js代码 */

    鼠标悬浮“‣”时，去除“折叠/展开”字样，css 无法实现，js 代码如下

    // 鼠标悬浮“‣”时，去除“折叠/展开”字样
(()=>{
    whenElementExist(".layout__center").then((element)=>{
        element.addEventListener('mouseover', async (e)=>{
            if(e.target.closest('button[aria-label="折叠/展开"]')){
                 const tooltip = await whenElementExist("#tooltip");
                 tooltip.remove();
            }
        });
    });
    function whenElementExist(selector) {
        return new Promise(resolve => {
            const checkForElement = () => {
                let element = null;
                if (typeof selector === 'function') {
                    element = selector();
                } else {
                    element = document.querySelector(selector);
                }
                if (element) {
                    resolve(element);
                } else {
                    requestAnimationFrame(checkForElement);
                }
            };
            checkForElement();
        });
    }
})();

    另外，你需求里提到的一级标题，我想你本意应该不是仅针对一级标题的样式吧，所以这里的样式和 js 会应用到 h1-h6 所有标题。

    2 回复
  • 其他回帖
  • wilsons •
    付费者 捐赠者

    修改后的代码，不知是否你想要的结果

    /* 有序列表，折叠时，去除数字方框阴影; 无序列表的折叠阴影不用去除 */
.protyle-wysiwyg [data-node-id].li[data-subtype="o"][fold="1"]>.protyle-action:after{
    background-color: transparent;
}

/* 只显示“‣” */
.protyle-gutters:not(:has(svg[style*="transform:rotate(90deg)"])) button[data-type="NodeList"] svg,
.protyle-gutters:not(:has(svg[style*="transform:rotate(90deg)"])) button[data-type="NodeListItem"] svg,
.protyle-gutters:not(:has(svg[style*="transform:rotate(90deg)"])) button[data-type="NodeHeading"] svg
{
    display:none;
}
/* 鼠标悬浮“‣”时去除方框引用 */
.protyle-gutters button:hover svg{
    background-color: transparent;
}
/* 折叠标题，去除方框（任我行主题，可以理解为“去除折叠状态标识”） */
.protyle-wysiwyg div[fold="1"]:not(div[data-type="NodeListItem"]){
    background-color: transparent;
    border:none;
}
/* 去掉标题折叠按钮背景 */
.protyle-wysiwyg div[fold="1"][data-type=NodeHeading]:before {
    background:none;
}
    1. 折叠状态下，需要常驻显示“‣”

    这个常驻不了，因为左侧图标是公用的，即随着鼠标切换到不同的块，这个里的内容会被替换掉，并且这个图标根据鼠标位置实时移动，因此无法针对每个块常驻这里的图标。

    如果想实现，必须抛弃现有的实现逻辑，用 before 或插入图标元素等重新设计，这个修改的代价可能太过高昂，且可能存在一些列兼容问题，甚至影响现有插件或现有功能，因此，暂时无法简单的支持，只能用其他样式或标记代替这个箭头按钮来标记折叠状态。

    另：折叠状态下，上面的片段似乎会覆盖以下片段

    我不知道你说的覆盖是指什么，我这里并没有出现覆盖情况，如果你指折叠时省略号被隐藏的话，这和这段代码无关，你不用这段代码，折叠时省略号也会隐藏（因为省略号超出折叠元素的范围）。

    3 回复
  • wilsons • • 1 • 1 评论
    付费者 捐赠者

    抱歉，之前的回复有问题，并不是因为省略号超出折叠元素范围导致的，而是因为折叠时标题前面的圆形图标和省略号是选择符是同一个元素，且圆形图标的优先级更高，覆盖了省略号导致的。

    所以，我现在在折叠模式下，用标题后面的文字元素再添加个样式来模拟标题元素的省略号，这样就弥补了折叠时标题省略号丢失问题。

    代码如下，添加到思源 css 代码片段中即可。

    .protyle-wysiwyg [data-node-id][data-type="NodeHeading"][fold="1"] > [contenteditable="true"]::before {
    position: absolute;
    top: -0.8em;
    color: #55555a4d;
}

.protyle-wysiwyg [data-node-id][fold="1"].h1 > [contenteditable="true"]::before {
    content: ".";
}

.protyle-wysiwyg [data-node-id][fold="1"].h2 > [contenteditable="true"]::before {
    content: "..";
}

.protyle-wysiwyg [data-node-id][fold="1"].h3 > [contenteditable="true"]::before {
    content: "...";
}

.protyle-wysiwyg [data-node-id][fold="1"].h4 > [contenteditable="true"]::before {
    content: "....";
}

.protyle-wysiwyg [data-node-id][fold="1"].h5 > [contenteditable="true"]::before {
    content: ".....";
}

.protyle-wysiwyg [data-node-id][fold="1"].h6 > [contenteditable="true"]::before {
    content: "......";
}
    感恩！
    JOYCELEEEEE •
  • JOYCELEEEEE • • 1 评论
    订阅者 作者

    签到拿积分的意义就在吸引你们这些巨佬 😎

    机会多多（我需求贼多且出手阔绰），社区不会亏待你们的贡献 😋

    好家伙, 你这饼画的又大又圆
    EmberSky •
  • 查看全部回帖
JOYCELEEEEE
输入是为输出。
回帖
146
 帖子
45
 积分
1941

近期热议

推荐标签 标签

  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用，支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    20 引用 • 7 回帖 • 2 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性。

    55 引用 • 85 回帖 • 1 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 28 关注
  • 钉钉

    钉钉，专为中国企业打造的免费沟通协同多端平台， 阿里巴巴出品。

    15 引用 • 67 回帖 • 335 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    132 引用 • 1114 回帖 • 126 关注
  • SSL

    SSL（Secure Sockets Layer 安全套接层），及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 419 关注
  • OnlyOffice
    4 引用 • 3 关注
  • 深度学习

    深度学习（Deep Learning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    53 引用 • 40 回帖 • 2 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统，它问世于 1985 年，起初仅仅是 Microsoft-DOS 模拟环境，后续的系统版本由于微软不断的更新升级，不但易用，也慢慢的成为家家户户人们最喜爱的操作系统。

    223 引用 • 474 回帖
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 27 关注
  • TGIF

    Thank God It's Friday! 感谢老天，总算到星期五啦！

    288 引用 • 4485 回帖 • 664 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）系统平台。

    下一代的社区系统，为未来而构建

    524 引用 • 4601 回帖 • 700 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言，在 20 世纪 90 年代中期由日本的松本行弘（まつもとゆきひろ/Yukihiro Matsumoto）设计并开发。在 Ruby 社区，松本也被称为马茨（Matz）。

    7 引用 • 31 回帖 • 216 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据（或者事件）流的 API。它组合了观察者模式，迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 161 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis，2010 年这个项目由 Apache 软件基金会迁移到了 google code，并且改名为 MyBatis ，2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 387 关注
  • sts
    2 引用 • 2 回帖 • 197 关注
  • Scala

    Scala 是一门多范式的编程语言，集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 139 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    21 引用 • 140 回帖 • 3 关注
  • 负能量

    上帝为你关上了一扇门，然后就去睡觉了....努力不一定能成功，但不努力一定很轻松 (° ー °〃)

    88 引用 • 1235 回帖 • 410 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机，如：iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    166 引用 • 595 回帖
  • 安全

    安全永远都不是一个小问题。

    200 引用 • 816 回帖
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合，以模块的方式组织管理插件以
    及相关配置，为不同的语言开发量身定制了相关的开发模块，该模块提供代码自动补全，
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 104 关注
  • 链书

    链书（Chainbook）是 B3log 开源社区提供的区块链纸质书交易平台，通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书，我们共同构建这个全新的交易平台，让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线，也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • Dubbo

    Dubbo 是一个分布式服务框架，致力于提供高性能和透明化的 RPC 远程服务调用方案，是 [阿里巴巴] SOA 服务化治理方案的核心框架，每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持，并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 604 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。

    354 引用 • 1823 回帖 • 1 关注
  • 学习

    “梦想从学习开始，事业从实践起步” —— 习近平

    171 引用 • 512 回帖
  • 招聘

    哪里都缺人，哪里都不缺人。

    190 引用 • 1057 回帖

最新标签