如何使网站在使用和不使用 javascript 的情况下工作

Question

出于多种原因（例如 noscript 浏览器插件），对于我当前的项目，我正在尝试使网站在没有客户端 javascript 的情况下运行。但是对于 javascript 可以创造附加值（例如可折叠内容）的情况，我会提供它。所以关闭js的用户会看到一个丑陋的页面，但可以访问所有内容。

因此，在 html 中我不能使用任何类，例如隐藏一个稍后将由 js 修改的元素。所以我的尝试（代码 sn-p 1）是首先显示所有内容，然后通过 js 将类添加到我想要操作的元素中。这行得通，但是因为 js 需要一些时间来加载和一些额外的时间来工作，所以在加载页面时会有一个短暂的故障，所以你基本上可以看到 js 是如何隐藏之前显示的元素的。 所以我想知道这是否是我必须忍受的事情，或者是否有解决方法？也许有标签的东西？例如。 noscript 标记内的样式标记，它将覆盖隐藏类（代码 sn-p 2）？

<div class="container">
    <div class="head">
        Topic 1 <button>+</button>
    </div>
    <div class="content">
        abc
    </div>
<div>

<div class="container">
    <div class="head">
        Topic 2 <button>+</button>
    </div>
    <div class="content">
        abc
    </div>
<div>

document.querySelectorAll(".container").forEach(el => {el.classList.add("contentHidden")});

------------ 或 ------------

<noscript>
    <style>
        .container.contentHidden>content {
            display: initial;
        }
    </style>
</noscript>

<div class="container contentHidden">
    <div class="head">
        Topic 1 <button>+</button>
    </div>
    <div class="content">
        abc
    </div>
<div>

<div class="container contentHidden">
    <div class="head">
        Topic 2 <button>+</button>
    </div>
    <div class="content">
        abc
    </div>
<div>

Answer 1

如何使用隐藏元素的 CSS 动画

@keyframes hidefirst {
    from {visibilty: hidden;}
    to {visibilty: visible;}
}
.hide {
    animation-name: hidefirst;
    animation-duration: 10000ms;
    animation-iteration-count: 1;
} 
.permhide {
    visibilty: hidden;
} 

然后使用Javascript从临时隐藏类更新为永久隐藏类。

let hidden = document.getElementsByClassName('hide');

hidden. foreach(
    element => element.className = 'permhide' )