登录 注册

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

总需求：

202410151257.png

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

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

202410151252.png

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

202410151302.png

2. 只显示“‣”

20241015.png

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

202410151254.png

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

202410151305.png

  • 思源笔记

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

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

    21592 引用 • 85422 回帖 • 3 关注
  • Q&A

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

    7745 引用 • 35286 回帖 • 187 关注
温州 位置 8 回帖
4
3
88 81 6 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 所有标题。

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • 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 回复
  • EmberSky • • 2 评论
    付费者

    我 3000 多积分的时候, 大佬还是 5000 多

    现在我终于到 5000 了, 然而大佬已经 1 万 2 了

    image.png

    1 回复
    莫慌，过段时间忙了，你赶超的机会来了 😄
    wilsons •
    @wilsons 我拿命超
    EmberSky •
  • JOYCELEEEEE •
    订阅者 作者

    大佬，还有点小问题：

    1.我想只在折叠状态下隐藏“‣”后面的标识（上面的代码在非折叠的状态下也把后面的标识隐藏了）

    202410151653.png

    2.折叠状态下，需要常驻显示“‣”（上面的代码只有鼠标悬浮时才显示“‣”，没法辨别折叠状态）

    202410151653.png

    PS：其实需求就是把列表折叠样式（即方框阴影）改为箭头“‣”

    3.标题样式

    之前表述没完全，标题折叠也只需显示“‣”

    202410151719.png

    另：折叠状态下，上面的片段似乎会覆盖以下片段，大佬看看能解决不：

    /* 设置统一的样式 */
.protyle-wysiwyg [data-node-id][data-type="NodeHeading"]::before {
    position: absolute;
    top: -0.8em;
    color: #55555a4d;
}

.protyle-wysiwyg [data-node-id].h1::before {
    content: ".";
}

.protyle-wysiwyg [data-node-id].h2::before {
    content: "..";
}

.protyle-wysiwyg [data-node-id].h3::before {
    content: "...";
}

.protyle-wysiwyg [data-node-id].h4::before {
    content: "....";
}

.protyle-wysiwyg [data-node-id].h5::before {
    content: ".....";
}

.protyle-wysiwyg [data-node-id].h6::before {
    content: "......";
}
    1 回复
  • JOYCELEEEEE • • 1 评论
    订阅者 作者

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

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

    好家伙, 你这饼画的又大又圆
    EmberSky •
  • 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 或插入图标元素等重新设计，这个修改的代价可能太过高昂，且可能存在一些列兼容问题，甚至影响现有插件或现有功能，因此，暂时无法简单的支持，只能用其他样式或标记代替这个箭头按钮来标记折叠状态。

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

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

    2 回复
  • JOYCELEEEEE •
    订阅者 作者

    明白了，不过常驻不能实现的话，这个代码对我也没有什么价值了 😂

    anyway，先采纳，谢谢大佬！

  • JOYCELEEEEE •
    订阅者 作者

    还是想挣扎一下：

    因此，暂时无法简单的支持，只能用其他样式或标记代替这个箭头按钮来标记折叠状态。

    对折叠的列表，能实现鼠标悬浮时，“‣”变为红色吗？

    1 回复
  • wilsons • • 1
    付费者 捐赠者

    对折叠的列表，能实现鼠标悬浮时，“‣”变为红色吗？

    这个是可以的，新增这个样式即可

    .protyle-gutters button[data-type="fold"] svg:not([style*="transform:rotate(90deg)"]) {
    color: red;
}

    不过常驻不能实现的话，这个代码对我也没有什么价值了

    所以这也可能是思源官方采用折叠按钮的背景色标记折叠状态，而没用常驻的原因吧。

请输入回帖内容 ...
JOYCELEEEEE
输入是为输出。 温州
回帖
125
 帖子
39
 积分
1260

近期热议

推荐标签 标签

  • Windows

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

    221 引用 • 473 回帖
  • 安全

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

    199 引用 • 816 回帖
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    12 引用 • 101 回帖
  • Ruby

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

    7 引用 • 31 回帖 • 212 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎，采用 Java 语言编写，不受平台的限制，同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式，可以兼容一些主流的数据库，因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 654 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”，乌云众测平台认证的“安全云”，为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 539 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。

    86 引用 • 122 回帖 • 621 关注
  • Gzip

    gzip （GNU zip）是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件，它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

    9 引用 • 12 回帖 • 133 关注
  • Ubuntu

    Ubuntu（友帮拓、优般图、乌班图）是一个以桌面应用为主的 Linux 操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词，意思是“人性”、“我的存在是因为大家的存在”，是非洲传统的一种价值观，类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    124 引用 • 169 回帖
  • 职场

    找到自己的位置，萌新烦恼少。

    127 引用 • 1705 回帖
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库，专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 58 关注
  • Electron

    Electron 基于 Chromium 和 Node.js，让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目，兼容 Mac、Windows 和 Linux，它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 2 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识，提高团队的工作效率，让用户满意。

    3 引用 • 8 回帖
  • Solo

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

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

    1433 引用 • 10052 回帖 • 483 关注
  • 小说

    小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    28 引用 • 108 回帖
  • MyBatis

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

    170 引用 • 414 回帖 • 387 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 5 关注
  • 新人

    让我们欢迎这对新人。哦，不好意思说错了，让我们欢迎这位新人！
    新手上路，请谨慎驾驶！

    51 引用 • 226 回帖
  • 知乎

    知乎是网络问答社区，连接各行各业的用户。用户分享着彼此的知识、经验和见解，为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码，也可以编译成 JavaScript，方便在没有 JVM 的设备上运行。在 Google I/O 2017 中，Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 65 关注
  • 钉钉

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

    15 引用 • 67 回帖 • 343 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    70 引用 • 533 回帖 • 770 关注
  • 导航

    各种网址链接、内容导航。

    38 引用 • 169 回帖
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议，它实现了浏览器与服务器之间的全双工通信（full-duplex）。

    48 引用 • 206 回帖 • 367 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具，助力您的学习与思考，让您的大脑更高效的记忆。

    笔记整理交给我，一心只读圣贤书。

    1 引用 • 1 回帖
  • Vue.js

    Vue.js（读音 /vju ː/，类似于 view）是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    263 引用 • 664 回帖
  • Oracle

    Oracle（甲骨文）公司，全称甲骨文股份有限公司（甲骨文软件系统有限公司），是全球最大的企业级软件公司，总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年，甲骨文已超越 IBM，成为继 Microsoft 后全球第二大软件公司。

    105 引用 • 127 回帖 • 405 关注

最新标签