अक्टूबरसीएमएस - गैर-मोबाइल

Question

पर सक्रिय करने के लिए ढहने योग्य सूची डिफ़ॉल्ट कैसे बनाएं I मेरे पास एक अक्टूबरसीएमएस साइट है और मैं एक संक्षिप्त सूची में एक साइडबार छिपाने की कोशिश कर रहा हूं ताकि जब मोबाइल पर देखा जाए तो सूची आइटम ध्वस्त हो जाएगा। के लिए यह नीचे दिए गए उदाहरण में के रूप में विस्तारित किया जा करने के लिए नहीं मोबाइल पर मैं देख रहा हूँ जब:

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>

आशा यह आपके लिए काम करेंगे।

आनंद लें !!!! धन्यवाद