[已解决] 有没有 css 能显示 / 隐藏闪卡答案

新帖子增加了隐藏整张图片 思源标记整张图片

能不能搞一个 css 点一下隐藏闪卡内容(那个绿色的)

再点一下显示出来,我设置的 css 发现公式还有一些特殊的隐藏不掉

image.png

image.png

image.png

回复中的是修改后的代码

// 添加颜色切换按钮
function addToggleColorBtn(perv_btn) {
    let barMode = document.getElementById(perv_btn);
    barMode.insertAdjacentHTML(
        "afterend",
        '<div id="toggle_color_btn" class="toolbar__item ariaLabel" aria-label="切换字体颜色">切换颜色</div>'
    );

    let toggleBtn = document.getElementById("toggle_color_btn");
    let isBlue = true; // 变量来跟踪当前颜色状态

    const changeColor = () => {
        const elements = document.querySelectorAll('[data-type="mark"]');
        elements.forEach(element => {
            if (isBlue) {
                element.style.color = '#0000ff00';           // 设置为蓝色
            } else {
                element.style.color = '#202124';          // 设置为绿色
                element.style.backgroundColor = 'white'; // 背景色为白色
            }
        });
        isBlue = !isBlue; // 切换状态
    };

    toggleBtn.addEventListener("click", changeColor);

    // 监测带有 data-type="mark" 的元素变化
    const observeMarkChange = () => {
        const observer = new MutationObserver((mutations) => {
            mutations.forEach(mutation => {
                mutation.addedNodes.forEach(node => {
                    if (node.nodeType === 1 && node.matches('[data-type="mark"]')) {
                        changeColor(); // 新的 mark 元素加载后,改变颜色
                    }
                });
            });
        });

        // 监听目标节点的子节点变化
        observer.observe(document.body, { childList: true, subtree: true });
    };

    observeMarkChange();

    return "toggle_color_btn";
}

// 添加按钮
setTimeout(() => {
    addToggleColorBtn("plugin_Calendar-heatmap_0");
}, 300);

  • 思源笔记

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

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

    23006 引用 • 92539 回帖
  • Q&A

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

    8445 引用 • 38466 回帖 • 154 关注
5 操作
maidang2233 在 2024-11-02 08:07:24 更新了该帖
maidang2233 在 2024-10-26 12:53:42 更新了该帖
maidang2233 在 2024-10-26 00:54:48 更新了该帖
maidang2233 在 2024-10-26 00:31:02 更新了该帖 JeffreyChen 在 2024-10-25 23:32:38 更新了该帖

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • maidang2233
    作者
    // 添加颜色切换按钮
    function addToggleColorBtn(perv_btn) {
        let barMode = document.getElementById(perv_btn);
        barMode.insertAdjacentHTML(
            "afterend",
            '<div id="toggle_color_btn" class="toolbar__item ariaLabel" aria-label="切换字体颜色">切换颜色</div>'
        );
    
        let toggleBtn = document.getElementById("toggle_color_btn");
        let isBlue = true; // 变量来跟踪当前颜色状态
    
        const changeColor = () => {
            const elements = document.querySelectorAll('[data-type$="mark"]'); // 选择以 "mark" 结尾的元素
            elements.forEach(element => {
                if (isBlue) {
                    element.style.color = '#0000ff00';           // 设置为蓝色
                } else {
                    element.style.color = '#202124';          // 设置为绿色
                    element.style.backgroundColor = 'white'; // 背景色为白色
                }
            });
            isBlue = !isBlue; // 切换状态
        };
    
        toggleBtn.addEventListener("click", changeColor);
    
        // 监测带有 data-type 以 "mark" 结尾的元素变化
        const observeMarkChange = () => {
            const observer = new MutationObserver((mutations) => {
                mutations.forEach(mutation => {
                    mutation.addedNodes.forEach(node => {
                        if (node.nodeType === 1 && node.matches('[data-type$="mark"]')) { // 检测以 "mark" 结尾的元素
                            changeColor(); // 新的 mark 元素加载后,改变颜色
                        }
                    });
                });
            });
    
            // 监听目标节点的子节点变化
            observer.observe(document.body, { childList: true, subtree: true });
        };
    
        observeMarkChange();
    
        return "toggle_color_btn";
    }
    
    // 添加按钮
    setTimeout(() => {
        addToggleColorBtn("plugin_Calendar-heatmap_0");
    }, 300);
    
    
    2 操作
    maidang2233 在 2024-10-26 12:51:57 更新了该回帖
    JeffreyChen 在 2024-10-26 01:09:30 更新了该回帖
  • kikkawa

    使用了这段 CSS 之后,我鼠标放到高亮文本上面高亮会消失,鼠标移开又回有高亮效果了,但是字体不会被高亮隐藏,这正常么?是不是少了一段 CSS 呢

    2 回复
  • maidang2233
    作者

    我没有听懂你在说啥,我这个 js 目的是标记的地方可以手动控制,并且可以有这个长度提示

  • maidang2233
    作者

    你看看回复中的代码

  • maidang2233
    作者

    js 缺少了新加载的内容不会继续隐藏,大佬来改吧,高三生没那么多时间(

推荐标签 标签

  • 导航

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

    42 引用 • 175 回帖
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖
  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    30 引用 • 96 回帖
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    728 引用 • 1273 回帖 • 2 关注
  • 链滴

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

    记录生活,连接点滴

    156 引用 • 3792 回帖
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 612 关注
  • BookxNote

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

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

    1 引用 • 1 回帖
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 5 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    288 引用 • 734 回帖
  • Sym

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

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

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

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 394 关注
  • Flutter

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

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

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

    11 引用 • 5 回帖 • 612 关注
  • GitLab

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

    46 引用 • 72 回帖
  • Hexo

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

    21 引用 • 140 回帖 • 3 关注
  • BAE

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

    19 引用 • 75 回帖 • 653 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 51 关注
  • JVM

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

    180 引用 • 120 回帖 • 2 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖 • 44 关注
  • sts
    2 引用 • 2 回帖 • 197 关注
  • OnlyOffice
    4 引用 • 2 关注
  • danl
    146 关注
  • OAuth

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

    36 引用 • 103 回帖 • 17 关注