サイドバーを非表示にしてページを読み込む方法

Question

idが "cross"の画像を対象とする.click（）関数で隠すサイドバーを作成しました。

サイドバー（.sidebar_menu）が表示されず、メニューのハンバーガー（.bars）が表示された状態でページが読み込まれることが私の目標です。私はこれをどのようにして行うのですか？

HTML：

 <img class="bars toggle_menu" src="http://res.cloudinary.com/dnooxiorz/image/upload/v1502388038/thinbarsfinal_knx5mw.png"> 
     <div class="sidebar_menu"> 
      <img id="cross" src="http://res.cloudinary.com/dnooxiorz/image/upload/v1502391349/cross_tcn6yk.png"> 
       <center> 
        <a href="index.html"><h1 class="boxed_item">HELLO</h1></a> 
       </center> 
       <ul class="navigation_selection"> 
        <a href="#"><li class="navigation_item">Projects</li></a> 
        <li class="navigation_item">About</li> 
        <li class="navigation_item">Resume</li> 
       </ul> 
     </div> 

Javascriptを：

$(document).ready(function(){ 


$("#cross").click(function(){ 
    $(".sidebar_menu").addClass("hide_menu"); 
    $(".toggle_menu").addClass("opacity_one"); 
}); 

$(".toggle_menu").click(function(){ 
    $(".sidebar_menu").removeClass("hide_menu"); 
    $(".toggle_menu").removeClass("opacity_one"); 
}); 

}）;

ベスト、 ジョン

Answer 1

はちょうどあなたのマークアップにTGE hide_menuクラスを追加します。

<div class="sidebar_menu hide_menu">

Answer 2

はこれを試してみてください -

$(document).ready(function(){ 

    var hideSideMenu = function(){ 
    $(".sidebar_menu").addClass("hide_menu"); 
    $(".toggle_menu").addClass("opacity_one"); 
    }; 

    hideSideMenu(); 

    $("#cross").click(function(){ 
    hideSideMenu(); 
    }); 

    $(".toggle_menu").click(function(){ 
     $(".sidebar_menu").removeClass("hide_menu"); 
     $(".toggle_menu").removeClass("opacity_one"); 
    }); 
}); 

基本的に、あなたがアクションを実行する必要がありますあなたの#crossクリック機能内で実行され、ドキュメントの読み込みでも初期状態として実行されます。

functionにラッピングすると、閉じるときに実行する機能を1か所にまとめておくことができます。関数内のアクションをラップして上記のように呼び出すことによって、サイドメニューを表示するのと同様に行うことをお勧めします。

Answer 3

HTMLページにクラスを追加すると、サイドバーを非表示にして読み込むことができます。

<div class="sidebar_menu hide_menu">...</div> 
<img class="bars toggle_menu opacity_one" src="..."> 

それとも、使用することができます。$(document).ready();インサイド

$("#cross").click(); 

を、それがロードされ、サイドバーをトグル画像をクリックます。