登录 注册

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

总需求：

202410151257.png

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

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

202410151252.png

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

202410151302.png

2. 只显示“‣”

20241015.png

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

202410151254.png

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

202410151305.png

  • 思源笔记

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

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

    22746 引用 • 91306 回帖 • 2 关注
  • Q&A

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

    8309 引用 • 37875 回帖 • 156 关注
10 回帖
5
4
192 122 69 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 回复
  • 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 或插入图标元素等重新设计，这个修改的代价可能太过高昂，且可能存在一些列兼容问题，甚至影响现有插件或现有功能，因此，暂时无法简单的支持，只能用其他样式或标记代替这个箭头按钮来标记折叠状态。

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

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

    3 回复
  • JOYCELEEEEE •
    订阅者 作者

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

    anyway，先采纳，谢谢大佬！

  • JOYCELEEEEE •
    订阅者 作者

    还是想挣扎一下：

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

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

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

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

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

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

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

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

  • JOYCELEEEEE •
    订阅者 作者

    你不用这段代码，折叠时省略号也会隐藏（因为省略号超出折叠元素的范围）

    来诈尸了，大佬有没有方法让折叠时省略号不被隐藏？（比如：加大折叠元素的范围...）

    1 回复
  • 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
输入是为输出。
回帖
145
 帖子
45
 积分
1730

近期热议

推荐标签 标签

  • 笔记

    好记性不如烂笔头。

    308 引用 • 793 回帖
  • OpenStack

    OpenStack 是一个云操作系统，通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成，同样也可以通过 Web 接口让最终用户部署资源。

    10 引用
  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 10 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖
  • Kotlin

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

    19 引用 • 33 回帖 • 63 关注
  • 友情链接

    确认过眼神后的灵魂连接，站在链在！

    24 引用 • 373 回帖
  • 资讯

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

    55 引用 • 85 回帖
  • 又拍云

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

    21 引用 • 37 回帖 • 546 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 1 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 28 关注
  • 互联网

    互联网（Internet），又称网际网络，或音译因特网、英特网。互联网始于 1969 年美国的阿帕网，是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。

    98 引用 • 344 回帖
  • GitHub

    GitHub 于 2008 年上线，目前，除了 Git 代码仓库托管及基本的 Web 管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱（报表）、代码片段分享（Gist）等功能。正因为这些功能所提供的便利，又经过长期的积累，GitHub 的用户活跃度很高，在开源世界里享有深远的声望，并形成了社交化编程文化（Social Coding）。

    209 引用 • 2031 回帖
  • JVM

    JVM（Java Virtual Machine）Java 虚拟机是一个微型操作系统，有自己的硬件构架体系，还有相应的指令系统。能够识别 Java 独特的 .class 文件（字节码），能够将这些文件中的信息读取出来，使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 1 关注
  • RESTful

    一种软件架构设计风格而不是标准，提供了一组设计原则和约束条件，主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

    30 引用 • 114 回帖 • 1 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    154 引用 • 3789 回帖
  • JWT

    JWT（JSON Web Token）是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准（RFC 7519），定义了一种简洁的，自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 5 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 260 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug（漏洞）。

    76 引用 • 1737 回帖 • 2 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划，本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE，直到 1999 年 Sun 买下此公司。Sun 于次年（2000 年）六月将 NetBeans IDE 开源，直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 686 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构，这是有关软件整体结构与组件的抽象描述，用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 4 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案，后端采用 Go 编写，采用 MIT 许可证。

    4 引用 • 16 回帖 • 2 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    117 引用 • 99 回帖 • 211 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计，是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 725 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    78 引用 • 424 回帖
  • IBM

    IBM（国际商业机器公司）或万国商业机器公司，简称 IBM（International Business Machines Corporation），总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国，是全球最大的信息技术和业务解决方案公司，拥有全球雇员 30 多万人，业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 142 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖 • 1 关注

最新标签