Question

我使用jQuery和Bootstrap以及存储在数据库中的一些文章。我的页面显示的文章分为几个部分，每个部分都有自己的标题。

我刚刚发现我默认会折叠所有部分（因此查看者只能看到标题，他们可以点击以显示文本），只需将其粘贴在页面底部：

<script> 
    $('.collapse').collapse()
</script>

这正是我一直在尝试做的事情，除了我只想要折叠移动设备中的部分。所以我刚写了一个脚本，只应在宽度小于450像素的显示器中折叠部分......

<script> 
    if( $(window).width() < 450 ) {
    $('.collapse').collapse()
    } else {
    $('.collapse').show()
    }
</script>

唯一的问题是它不起作用;各部分在所有屏幕宽度上展开。如果我将less-than符号更改为more-than，那么这些部分将在所有屏幕大小处折叠。

任何人都可以看到我做错了吗？

修改

感谢您的提示，但我从来没有听说过＆＃34; doc ready block＆＃34;之前。我按照你的例子和谷歌的更多例子，但它仍然不适合我。这是我试过的脚本：

<script>
$(document).ready(function() {
 if( $(window).width() < 450 ) {
    $('.collapse').collapse()
 } else {
    $('.collapse').show()
 }
});
</script>

另一个......

<script>
$(function (){
   $('.collapse').toggle($(window).width() < 450);
});
</script>

编辑＃2

哇，这是最有帮助的讨论之一，尽管它对我来说没有任何作用。我终于通过将JavaScript函数修改为：

来实现我的目标

<script>
 $(document).ready(function() {
 if ($(window).width() >= 450) {
 $('.collapse').show();
 } else {
 $('.collapse').collapse().collapse('show');
 }
});
</script>

但是，当我将CSS和JS文件替换为下面一个答案中链接的四个文件时，事情就会崩溃。我认为我最好跟上最新的技术，所以我复制了我的页面并将其删除，删除了可能与这四个文件冲突的所有CSS和JS。

这次我通过再次修改脚本使其工作：

<script>
$(document).ready(function() {
if ($(window).width() <= 450) {
$('.show').collapse();
} else {
$('.collapse').collapse().collapse('show');
}
});
</script>

然而，我的字形停止显示，所以我现在必须解决这个问题。但是下面的所有提示都非常有用;选择最佳答案很难。

P.S。我刚刚在我的精简页面中再次测试了Shashank的代码并发现它正在运行。

<script>
$(document).ready(function() {
 if( $(window).width() < 450 ) {
    $('.collapse').collapse('hide');
 } else {
    $('.collapse').collapse('show');
 }
});
</script>

Answer 1

更新

如果我将less-than符号更改为more-than，那么这些部分将在所有屏幕尺寸下折叠。

然后我想你需要lte，这应该是：

 if($(window).width() <= 450){
 //-----here-----------^

似乎您需要一个doc ready块并使用.toggle(condition)：

  $(function (){
       $('.collapse').toggle($(window).width() < 450);
  });

Answer 2

您应该将代码包装在ready块中，并按以下方式进行更改：

$(document).ready(function() {
    if( $(window).width() < 450 ) {
        $('.collapse').collapse('hide');
    } else {
        $('.collapse').collapse('show');
    }
});

此外，您可以将类collapse放在您的两个列内容中，以便默认情况下可以隐藏它，直到Javascript / jQuery执行。

以下是工作代码段。如果这不起作用，请尝试我创建的Plunkr。尝试调整输出窗口的大小，然后在Plunkr中运行代码以查看预期结果。

$(document).ready(function() {
  console.log('Width: ', $(window).width());

  if ($(window).width() < 450) {
    $('.collapse').collapse('hide');
  } else {
    $('.collapse').collapse('show');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<div class="row">
  <div class="col-sm-6">
    <h1><a href="#collapse1" data-toggle="collapse">Header 1</a></h1>
    <div class="collapse" id="collapse1">
      Some content 1
    </div>
  </div>

  <div class="col-sm-6">
    <h1><a href="#collapse2" data-toggle="collapse">Header 1</a></h1>
    <div class="collapse" id="collapse2">
      Some content 2
    </div>
  </div>
</div>

Answer 3

如果您只想隐藏所有内容并希望在页面加载时显示标题，那么您也可以使用css媒体查询。这是最快的方式。

@media only screen and (max-width: 450px) {
     .collapse{
          display: none;
     }
}

jQuery屏幕宽度脚本

3 个答案:

更新