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 { display: block}

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

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

（3.您可以将默认css设置为.collapse { display: block; }并在页面加载时通过javascript更改它。但我想这会有点超过顶部..）

Answer 2

我正在绞尽脑汁想要怎么做，但后来我发现了：

<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">

通过将"show"添加到班级列表来扩展

。

所以我的解决方案：

默认情况下展开导航。
导航是一行而不是列，周围有空格。
默认情况下隐藏切换按钮。
隐藏导航，将导航设为居中的列，并使用JS（如果可用）显示切换按钮。

HTML

<div class="collapse navbar-collapse justify-content-end show" id="navbarSupportedContent">

CSS

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

编辑:(现在正在使用JS的window.matchMedia API）

JS（jQuery - 可以很容易地用Vanilla JS完成）

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');
}

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

2 个答案: