OctoberCMS - Yalnızca mobil olmayanlarda etkin olarak varsayılan olarak daraltılabilir liste varsayılanı nasıl yapılır

Question

Bir EkimCMS sitem var ve mobilde görüntülendiğinde liste öğesi deraltılmış olacak şekilde bir açılır kutunun kenar çubuğunu gizlemeye çalışıyorum. o aşağıdaki örnekte olduğu gibi açılımı açısından mobil ortamda Bakıyorum değil Ne zaman:

http://codepen.io/anon/pen/GoqPJj

kod aşağıda:

<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> 

kimse ben yukarıdaki örneği düzenleyebilir biliyor mu İstenen sonucu üretmek için?

Answer 1

İşte gereksiniminiz doğrultusunda çalışan kod. Burada $(document).width()'u 420 olarak tanımladım. Gereksiniminize göre bunu değiştirebilirsiniz. Bu sizin için çalışacaktır

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>

Umut.

Enjoy !!!! Teşekkürler