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

Question

我有一个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>

有没有人知道我该如何编辑上面的例子来达到期望的结果？

- user2694306

Answer 1

这是符合您要求的代码。我在这里定义了$( 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>

希望这对您有用。 享受吧！！！ 谢谢

- Bhavin Solanki