最初のページが読み込まれたときにjqueryを使用してモバイルビューでサイドバーを非表示にする方法

Question

ウェブサイトがモバイルビューで開いている場合、入力要素のチェックされたイベントをトリガーする方法を教えてください。最初に.portfolioクラスだけを表示できるように、チェックされたイベントをドキュメントのロード時に処理します。これを手助けしてください。

.sidebar { 
    background-color: black; 
    width: 150px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
} 

.sidebar h1 { 
    color: white; 
} 

.portfolio { 
    background-color: red; 
    position: absolute; 
    top: 0; 
    left: 150px; 
    right: 0; 
    bottom: 0; 

    -moz-transition: left 0.5s ease; 
    transition: left 0.5s ease; 
} 

input[type=checkbox] { 
    display: none; 
} 

input:checked ~ .portfolio { 
    left: 0; 
} 

input:checked ~ label { 
    left: 0; 
} 

label { 
    z-index: 2; 
    position: absolute; 
    top: 0; 
    left: 150px; 
    background-color: blue; 

    -moz-transition: left 0.5s ease; 
    transition: left 0.5s ease; 
} 



<div class="main-wrap"> 
    <input id="slide-sidebar" type="checkbox" role="button" /> 
     <label for="slide-sidebar"><span>close</span></label> 
    <div class="sidebar"><h1>Settings</h1></div> 
    <div class="portfolio"><h1>My Portfolio</h1></div> 
</div> 

Answer 1

以下のコードを参考にしてください。

$(document).ready(function(){ 
 
    $("#log").text($(window).width()); 
 
    $(window).resize(function() { 
 
    var window_width=$(window).width(); 
 
    $("#log").text(window_width); 
 
    if(window_width<500) 
 
     $('.sidebar').hide(); 
 
    else 
 
     $('.sidebar').show(); 
 
    
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Window width : 
 
<div id="log"> 
 
</div> 
 
<div class="main-wrap"> 
 
    <div class="sidebar"><h1>Settings</h1></div> 
 
    <div class="portfolio"><h1>My Portfolio</h1></div> 
 
</div>