JS禁用时Bootstrap崩溃行为的后备

Question

我有一些正是这样.它作为展示和预期工作.

但是,禁用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>

我已经创建了这个codepen,但不确定为什么崩溃不起作用(我是Codepen的新手).

Answer 1

如果没有JS,则无法使用折叠功能,因此您必须默认手动显示.collapse内容.

在我看来,你有两个选择:

1.)检测JS是否被激活(例如使用modernizr)并在您的CSS中进行特殊声明.例如.no-js .collapse { display: block}

2.)使用noScript HTML标记,只有在禁用JS时才会加载.把它放在文档的开头

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

(3.你可以设置默认的css .collapse { display: block; }并在页面加载时通过javascript更改它.但我想这会有点超过顶部..)