Jquery OctoberCMS-如何使可折叠列表默认为仅在非移动设备上处于活动状态

我有一个OctoberCMS网站，我试图在一个可折叠的列表中隐藏一个侧栏，这样当在手机上查看时，列表项将被折叠。当不在手机上时，我希望它能像下面的例子那样扩展：

代码如下：

<div class="container">
    <div class="row">
        <div class="col s12 m6">
            <ul class="collapsible" data-collapsible="accordion">
                <li>
                    <div class="collapsible-header active"><i class="material-icons">filter_drama</i>First</div>
                    <div class="collapsible-body">
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="col s12 m6">
            This is the main page content. Here is some more content, and here is some even more content. It never seems to end as I add random text. Just one more sentence to make it a bit more complete.
        </div>
    </div>
</div>

先过滤
Lorem ipsum dolor sit amet



这是主页的内容。这里有更多的内容，这里有更多的内容。当我添加随机文本时，它似乎永远不会结束。再多说一句，让它更完整一点。

---

有人知道我如何编辑上面的示例以产生所需的结果吗？

以下是根据您的要求工作的代码。这里我将

$（document）.width（）定义为420。您可以根据您的要求进行更改


if（$（文档）.width（）<420）{
$（'.collappable body'）.hide（）；
$（'.active'）.removeClass（'active'）；
}



先过滤
Lorem ipsum dolor sit amet



这是主页的内容。这里有更多的内容，这里有更多的内容。当我添加随机文本时，它似乎永远不会结束。再多说一句，让它更完整一点。