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> 

誰もが、私は上記の例を編集することができます方法を知っています望ましい結果を生み出すために？

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"> 
 
\t <div class="row"> 
 
\t \t <div class="col s12 m6"> 
 
\t \t \t <ul class="collapsible" data-collapsible="accordion"> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <div class="collapsible-header active"><i class="material-icons">filter_drama</i>First</div> 
 
\t \t \t \t \t <div class="collapsible-body"> 
 
\t \t \t \t \t \t <p>Lorem ipsum dolor sit amet.</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t \t <div class="col s12 m6"> 
 
\t \t \t 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. 
 
\t \t </div> 
 
\t </div> 
 
</div>

これはあなたのために働くことを願っています。

お楽しみください!!!! ありがとうございました