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

时间:2015-10-01 13:43:49

标签: javascript css twitter-bootstrap

我的确有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的新手)。

2 个答案:

答案 0 :(得分:5)

如果没有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更改它。但我想这会有点超过顶部..)

答案 1 :(得分:2)

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

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

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

所以我的解决方案:

  1. 默认情况下展开导航。
  2. 导航是一行而不是列,周围有空格。
  3. 默认情况下隐藏切换按钮。
  4. 隐藏导航,将导航设为居中的列,并使用JS(如果可用)显示切换按钮。
  5. 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');
    }