javascript - 为智能手机打开 Twitter Bootstrap 崩溃

Question

我有这样的代码片段:

 <div class="alert alert-info">Today's news
        <div class="pull-right"><a class="btn btn-small" data-toggle="collapse" data-target="#newsDiv"><i class="icon-chevron-down"></i></a></div>
    </div>
    <div id="newsDiv" class="collapse in">
        Today something happened<br>
        Also yesterday happened<br>
        Maybe tomorrow<br>
    </div>

jsFiddle:http://jsfiddle.net/gfUXW/

我想要这种行为:当用户使用手机(宽度为 480 像素及以下)访问时，折叠将关闭，当用户使用更大的设备访问时，折叠将自动打开。

为了让它响应，我需要按照 CSS 规则来做。但我不知道如何加入 responsive classes像“visible-phone”和“collapse in”类这样的 Bootstrap 。

Answer 1

既然崩溃是一个javascript插件，我认为答案在于使用一些javascript。

如果您删除 in 类，它会默认关闭您的折叠，了解这一点很有用。然后您可以在文档准备好后检查它。

  if ($(window).width() > 480) {
    $(".collapse").collapse('show');   
  }

方法在文档中:Bootstrap Collapse

通过点击不同屏幕宽度的运行来查看它的运行情况:http://jsfiddle.net/LaAWc/1/

如果你想经常检查这个，你必须用计时器轮询以保持检查。如果您对此感兴趣，请参阅 How to detect in jquery if screen resolution changes?