[已解决] 有没有 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);

  • 思源笔记

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

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

    23012 引用 • 92566 回帖
  • Q&A

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

    8447 引用 • 38477 回帖 • 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
    作者

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

  • 其他回帖
  • maidang2233
    作者

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

  • 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 更新了该回帖
  • maidang2233
    作者

    你看看回复中的代码

  • 查看全部回帖

推荐标签 标签

  • Postman

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

    4 引用 • 3 回帖 • 7 关注
  • ZooKeeper

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

    59 引用 • 29 回帖 • 14 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    171 引用 • 512 回帖
  • JWT

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

    20 引用 • 15 回帖 • 6 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 538 关注
  • 宕机

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

    13 引用 • 82 回帖 • 59 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 5 关注
  • 房星科技

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

    6 引用 • 141 回帖 • 584 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖 • 2 关注
  • 自由行
    4 关注
  • Sym

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

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

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

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

    85 引用 • 139 回帖
  • Log4j

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

    20 引用 • 18 回帖 • 29 关注
  • TensorFlow

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

    20 引用 • 19 回帖 • 1 关注
  • NGINX

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

    313 引用 • 547 回帖 • 1 关注
  • Hprose

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

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

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

    29 引用 • 98 回帖 • 694 关注
  • Latke

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

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

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    66 引用 • 114 回帖 • 223 关注
  • Solo

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

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

    1435 引用 • 10056 回帖 • 489 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖 • 1 关注
  • 分享

    有什么新发现就分享给大家吧!

    248 引用 • 1795 回帖
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 164 关注
  • BookxNote

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

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

    1 引用 • 1 回帖