jQuery屏幕宽度脚本

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

我刚刚发现，通过在页面底部粘贴以下内容，默认情况下我会折叠所有部分（因此，查看者只能看到标题，他们可以单击标题来显示文本）：

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

$（'.collapse'）.collapse（）

这正是我一直试图做的，除了我只想折叠移动设备中的部分。所以我刚刚写了一个脚本，应该只在小于450像素宽的监视器中折叠部分

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

如果（$（窗口）.width（）<450）{
$（'.collapse'）.collapse（）
}否则{
$（'.collapse'）.show（）
}

唯一的问题是它不起作用；这些部分在所有屏幕宽度上展开。如果我将小于符号更改为大于，则所有屏幕大小的部分都将折叠

有人能看出我做错了什么吗

编辑：

谢谢你的提示，但我以前从没听说过“doc ready block”。我跟随你的例子和谷歌的更多例子，但它仍然不适合我。以下是我尝试过的脚本：

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

$（文档）.ready（函数（）{
如果（$（窗口）.width（）<450）{
$（'.collapse'）.collapse（）
}否则{
$（'.collapse'）.show（）
}
});

另一个

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

$（函数（）{
$（'.collapse'）.toggle（$（window.width（）<450）；
});

编辑#2

哇，这是最有帮助的讨论之一，尽管对我来说没有什么是应该的。通过将JavaScript函数修改为以下内容，我最终实现了我的目标：

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

$（文档）.ready（函数（）{
如果（$（窗口）.width（）>=450）{
$（'.collapse'）.show（）；
}否则{
$（'.collapse'）.collapse（）.collapse（'show'）；
}
});

然而，当我将CSS和JS文件替换为下面一个答案中链接到的四个文件时，情况就不一样了。我想我最好跟上最新的技术，所以我复制了我的页面并将其剥离，删除了所有可能与这四个文件冲突的CSS和JS

这一次，我再次修改了脚本，使其正常工作：

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

$（文档）.ready（函数（）{
如果（$（窗口）.width（）更新：
如果我将小于符号更改为大于，则所有屏幕大小的部分都将折叠

那么我想您需要
lte
，应该是：

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

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

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


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

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

很好的例子，但我两个都不能用。我编辑了我的问题来展示我是如何编写脚本的。太棒了！我必须下载你链接到的那些.js和.css文件，然后再试一次。我在一家WiFi咖啡馆，几分钟后就要关门了，所以我必须跑步。明天我可能会选择这个作为正确答案。当然。我有updated用一个有效的plunkr给出了答案。尝试一下期望的结果。Thx-这也是最简单的方法。事实上，我想我本来也在做类似的事情；我不知道为什么它停止了工作。我在我的原始页面和一份我删去的副本中都尝试了你的风格，但对我来说不起作用。我还在玩它，但我不知道我还没有弄清楚我做错了什么。@DavidBlomstrom我想你需要检查你的css顺序。可能是什么东西覆盖了你的css或者最后尝试了！重要。我知道这不是一个好方法，但至少你知道你的媒体查询条件是否被应用了。
$(document).ready(function() {
    if( $(window).width() < 450 ) {
        $('.collapse').collapse('hide');
    } else {
        $('.collapse').collapse('show');
    }
});

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