求一个折叠样式的代码片段(变态版)

总需求:

202410151257.png

有点复杂,以有序列表为例:


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

202410151252.png

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

202410151302.png

2. 只显示“‣”

20241015.png

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

202410151254.png

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

202410151305.png

  • 思源笔记

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

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

    22747 引用 • 91307 回帖 • 2 关注
  • Q&A

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

    8309 引用 • 37875 回帖 • 156 关注

相关帖子

被采纳的回答
  • 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 所有标题。

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • JOYCELEEEEE

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

    anyway,先采纳,谢谢大佬!

  • 其他回帖
  • JOYCELEEEEE 1 评论

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

    机会多多(我需求贼多且出手阔绰),社区不会亏待你们的贡献 😋

    好家伙, 你这饼画的又大又圆
    EmberSky
  • 修改后的代码,不知是否你想要的结果

    /* 有序列表,折叠时,去除数字方框阴影; 无序列表的折叠阴影不用去除 */
    .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

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

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

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

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

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

  • 查看全部回帖

推荐标签 标签

  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 23 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • 笔记

    好记性不如烂笔头。

    308 引用 • 793 回帖
  • JWT

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

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

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 1 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    5 引用 • 107 回帖 • 2 关注
  • 架构

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

    142 引用 • 442 回帖
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    78 引用 • 390 回帖
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 70 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    572 引用 • 3533 回帖
  • OkHttp

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

    16 引用 • 6 回帖 • 77 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 7 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖 • 1 关注
  • SpaceVim

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

    3 引用 • 31 回帖 • 99 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 626 关注
  • Latke

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

    71 引用 • 535 回帖 • 789 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 55 关注
  • Hexo

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

    21 引用 • 140 回帖 • 2 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    691 引用 • 535 回帖
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    91 引用 • 899 回帖
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 624 关注
  • OnlyOffice
    4 引用 • 5 关注
  • 钉钉

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

    15 引用 • 67 回帖 • 336 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 494 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 625 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖