我有一个OctoberCMS网站,我正试图在可折叠列表中隐藏一个侧边栏,以便在移动设备上查看时可以折叠列表项。当不在移动设备上时,我正在寻找它的扩展,如下例所示:
http://codepen.io/anon/pen/GoqPJj
代码如下:
<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>
有人知道我如何编辑上面的例子来产生想要的结果吗?
以下是根据您的需求工作的代码。在这里,我将$( document ).width()
定义为420。您可以根据自己的要求进行更改。
if($( document ).width() < 420){
$('.collapsible-body').hide();
$('.active').removeClass('active');
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js'></script>
<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>
希望这对你有用。
享受吧!!!!感谢