登录 注册

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

总需求：

202410151257.png

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

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

202410151252.png

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

202410151302.png

2. 只显示“‣”

20241015.png

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

202410151254.png

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

202410151305.png

  • 思源笔记

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

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

    22249 引用 • 88926 回帖
  • Q&A

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

    8072 引用 • 36874 回帖 • 162 关注
温州 位置 8 回帖
4
3
140 108 31 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
输入是为输出。 温州
回帖
126
 帖子
39
 积分
1673

近期热议

推荐标签 标签

  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 8 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 41 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖
  • Wide

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

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

    30 引用 • 218 回帖 • 628 关注
  • CAP

    CAP 指的是在一个分布式系统中， Consistency（一致性）、 Availability（可用性）、Partition tolerance（分区容错性），三者不可兼得。

    11 引用 • 5 回帖 • 606 关注
  • 大数据

    大数据（big data）是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统，实现一个自托管的 Git 项目仓库，可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖 • 2 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 707 关注
  • Latke

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

    71 引用 • 535 回帖 • 780 关注
  • 安装

    你若安好，便是晴天。

    132 引用 • 1184 回帖 • 2 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖
  • 反馈

    Communication channel for makers and users.

    123 引用 • 911 回帖 • 243 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库，强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery，是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 727 关注
  • Solo

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

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

    1434 引用 • 10054 回帖 • 490 关注
  • 宕机

    宕机，多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态，也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态，也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 53 关注
  • Ubuntu

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

    124 引用 • 169 回帖
  • SVN

    SVN 是 Subversion 的简称，是一个开放源代码的版本控制系统，相较于 RCS、CVS，它采用了分支管理系统，它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 682 关注
  • Bug

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

    75 引用 • 1737 回帖 • 4 关注
  • 房星科技

    房星网，我们不和没有钱的程序员谈理想，我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源，遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 585 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库，该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable：一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样，HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 74 关注
  • JWT

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

    20 引用 • 15 回帖 • 1 关注
  • 笔记

    好记性不如烂笔头。

    308 引用 • 793 回帖
  • ZooKeeper

    ZooKeeper 是一个分布式的，开放源码的分布式应用程序协调服务，是 Google 的 Chubby 一个开源的实现，是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件，提供的功能包括：配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 3 关注
  • WebComponents

    Web Components 是 W3C 定义的标准，它给了前端开发者扩展浏览器标签的能力，可以方便地定制可复用组件，更好的进行模块化开发，解放了前端开发者的生产力。

    1 引用
  • Log4j

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

    20 引用 • 18 回帖 • 33 关注
  • BAE

    百度应用引擎（Baidu App Engine）提供了 PHP、Java、Python 的执行环境，以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用，并且提供动态扩容和负载均衡的运行环境，让开发者不用考虑高成本的运维工作，只需专注于业务逻辑，大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 637 关注
  • 人工智能

    人工智能（Artificial Intelligence）是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    132 引用 • 188 回帖

最新标签