javascript - 禁用 JS 时 Bootstrap 折叠行为的回退

Question

我有一些东西 like this .它按预期工作。

但是，当禁用 JavaScript 时，该按钮不起作用。我可以采取什么最简单的方法来克服这个问题？

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    <h2>Hello, how are you?</h2>
  </div>
</div>

我创建了 this codepen ，但不确定为什么折叠不起作用(我是 Codepen 的新手)。

Answer 1

如果没有 JS，您将无法使用折叠功能，因此默认情况下您必须手动显示 .collapse 内容。

在我看来你有两个选择:

1.) 检测 JS 是否被激活(例如使用 modernizr )并在你的 css 中做一个特殊的声明。例如.no-js .collapse { 显示: block }

2.) 使用 noScript HTML 标签，它仅在禁用 JS 时加载。把它放在文档的开头

<noscript>
    <style>
        .collapse {
            display: block;
        }
              </style>
            </noscript>

(3. 您可以将默认 css 设置为 .collapse { display: block; } 并在页面加载时通过 javascript 更改它。但我想这有点过头了.. )