weixin_39427213 2021-03-07 01:33 采纳率: 0%
浏览 14

如何实现展开和收齐，展开的代码如下

<div class="text"><div class="fullhint">{{hint:完全展开}}</div></div></br><div class='from'>

 

<script>

// remove cloze syntax from revealed hint

var hint = document.querySelector('.fullhint>[id^="hint"]')

var html = hint.innerHTML.replace(/\[\[oc(\d+)::(.*?)(::(.*?))?\]\]/mg, "$2")

hint.innerHTML = html

// scroll to cloze

document.addEventListener('DOMContentLoaded', function() {

setTimeout(function(){

const cloze1 = document.getElementsByClassName("cloze")[0];

const rect = cloze1.getBoundingClientRect();

const absTop = rect.top + window.pageYOffset;

const absBot = rect.bottom + window.pageYOffset;

if (absBot >= window.innerHeight) {

const height = rect.top - rect.bottom

const middle = absTop - (window.innerHeight/2) - (height/2);

window.scrollTo(0, middle);};

}, 1);

}, false);

 

</script>

 

  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-07-24 09:31
    关注

    以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

    要实现展开和收齐的效果，可以使用HTML、CSS和JavaScript。以下是一个简单的示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展开和收齐效果</title>
    <style>
        .fullhint {
            display: none;
        }
        
        .fullhint>.highlight {
            background-color: #f0f0f0;
            padding: 10px;
            border-radius: 5px;
        }

        .hidden {
            display: block;
        }
    </style>
</head>
<body>
    <div class="text">
        <div class="fullhint">
            <div class="highlight">Hello World!</div>
        </div>
    </div>
    
    <script>
        // 展开和收齐的逻辑
        const fullHint = document.querySelector('.fullhint');
        const highlightElement = fullHint.querySelector('.highlight');

        fullHint.classList.add('hidden'); // 将全显示隐藏

        highlightElement.addEventListener('click', () => {
            fullHint.classList.remove('hidden');
        });
    </script>
</body>
</html>

    在这个例子中，我们首先为.fullhint元素添加了一个类名为.hidden，以便在开始时将其隐藏。

    然后，我们在.fullhint内部创建一个.highlight元素，并为其设置背景颜色、边框样式等。这样做的目的是为了展示当前被选中的部分。

    接下来，我们监听.highlight元素上的点击事件。当用户点击.highlight元素时，我们将.fullhint元素从.hidden状态移除，使其重新变为可见。

    这将实现你所描述的展开和收齐效果。

    评论

报告相同问题？

  • 这一年，这些书：2021年读书笔记
    2021-12-31 22:41
    Heartsuit的博客 在中国古代，各个部落之间是分散而凌乱的，每个部落的图腾都是不同的动物，如鱼、牛、蛇、鹰这些，后来部落实现了大一统，这时用什么作为图腾呢？那就取每个部落图腾的最大特点，如鹰的爪子、牛的头、鱼的鳞片，最终...
  • SSM家教招聘系统--附源码07111
    2025-12-15 10:57
    计算机毕业设计开发的博客 本系统采用SSM（Spring + Spring...作为目前较为流行的Java Web开发框架之一，SSM框架以其高度的可扩展性、易维护性和良好的性能而著称。将SSM框架应用于家教招聘系统，有助于增强系统的稳定性和可维护性..............
  • Python深度学习：从入门到精通
    2025-12-07 12:00
    幻云2010的博客 一群富有远见的科学家齐聚一堂，首次提出了“人工智能”这一术语，并对其进行了初步定义：让机器能够执行通常需要人类智能才能完成的任务。其中，英国数学家、逻辑学家艾伦·图灵在1950年提出的著名“图灵测试”，...
  • Python深度学习：从零基础到项目实战
    2026-01-04 13:29
    莲华君的博客 一群富有远见的科学家齐聚一堂，首次提出了“人工智能”这一术语，并对其进行了初步定义：让机器能够执行通常需要人类智能才能完成的任务。其中，英国数学家、逻辑学家艾伦·图灵在1950年提出的著名“图灵测试”，...
  • Python深度学习：从入门到实战
    2025-12-16 10:46
    莲华君的博客 一群富有远见的科学家齐聚一堂，首次提出了“人工智能”这一术语，并对其进行了初步定义：让机器能够执行通常需要人类智能才能完成的任务。其中，英国数学家、逻辑学家艾伦·图灵在1950年提出的著名“图灵测试”，...
  • 51c大模型~合集181
    2025-09-12 19:40
    whaosoft-143的博客 首先，从理论上来看，李崇轩指出：从概率建模的角度来看，大语言模型的关键并不是必须依赖自回归展开，而是能否有效地表示和学习高维复杂的联合概率分布，即通过最大似然估计或最小化 KL 散度来逼近真实语言分布。...
  • 51c大模型~合集118
    2025-04-17 23:31
    whaosoft-143的博客 此外，还讨论了参数高效微调（PEFT）技术，包括适配器、LoRA和QLoRA；介绍了提示策略、模型压缩方法（如剪枝和量化），以及各种量化技术（GPTQ、NF4、GGML）。最后，对用于减小模型大小的蒸馏和剪枝技术进行了讲解。...
  • HTML5 + CSS3 学习笔记
    2025-05-29 16:09
    Code HotPot的博客 同时会讲解响应式布局，即一套代码多端适配，在 PC 端、PAD 端、 移动端打开网页会自动适配，呈现出不同效果。静态页面通常是用HTML、CSS和一些静态的资源文件（如图片、字体等）构建的，浏览器加载页面时，它显示的...
  • RTL设计与编码指导
    2021-06-11 16:19
    _Bradley_的博客 面积和速度的平衡与互换原则 面积（Area）是指一个设计所消耗的目标器件的硬件资源数量，对FPGA，可以使用所消耗的触发器（FF）和查找表（LUT）来衡量。速度（Speed）是指设计在芯片上稳定运行时所能到达的最最高...
  • 可视化中的数学基础知识
    2022-05-13 19:56
    seeooco的博客 可视化学习的基础数学知识，本文通过数学计算、几何直观理解、代码实现来加深对可视化中的数学基础知识的理解。
  • 没有解决我的问题, 去提问