Javascript 引导的一种后备方法'；禁用JS时的折叠行为

我确实有些东西。它的工作方式和预期的一样

但是，当禁用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新手）。

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

我认为你有两个选择：

1.）检测JS是否被激活（例如使用），并在css中做出特殊声明。e、 g.

.no js.collapse{display:block}

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

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

.崩溃{
显示：块；
}

---

（3.您可以将默认css设置为

.collapse{display:block；}

，并在页面加载时通过javascript进行更改。但我想这可能有点过头了。

我在绞尽脑汁想如何做到这一点，但后来我发现：

通过向类列表中添加

“show”

来展开

因此，我的解决方案是：

默认情况下扩展导航

将导航设置为行而不是列，并在其周围留出空间

默认情况下隐藏切换按钮

隐藏导航，使导航成为中心列，并使用JS显示切换按钮（如果可用）

HTML

CSS

编辑：（现在使用JS的

window.matchMedia

API可以正常工作）

JS（jQuery——不过可以很容易地用Vanilla JS完成）

---

那很好用。顺便问一下，为什么我不能让崩溃在我的Codpen中工作？@Ciwan你包括jQuery了吗？我建议对与引导相关的小提琴使用引导层。。

@media (max-width: 990px) {
  a.nav-link {
    text-align: center;
  }
  .navbar-nav {
    flex-direction: row;
     justify-content: space-around;
  }
  button.navbar-toggler {
    opacity: 0;
  }
}

var mq = window.matchMedia("(max-width: 990px)");

if (mq.matches) {
  // change back to centered columns
  $('.navbar-nav').css({'flex-direction': 'column', 'justify-content': 
'center'});
  // show toggle button
  $('button.navbar-toggler').css('opacity', '1.0');
  // collapse
  $('.collapse.show').removeClass('show');
}