So laden Sie meine Seite mit ausgeblendeter Seitenleiste

Question

Ich habe eine Seitenleiste erstellt, die mit der Funktion .click() ausgeblendet wird, die auf ein Bild mit der ID "cross" abzielt.

Es ist mein Ziel, Seiten laden ohne Seitenleiste (.sidebar_menu) sichtbar, und mit meinem Menü Hamburger (. Bars) sichtbar. Wie mache ich das?

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"); 
}); 

});

Best, John

Answer 1

Fügen Sie einfach TGE hide_menu Klasse in Ihrem Aufschlag:

<div class="sidebar_menu hide_menu">

Answer 2

Versuchen Sie, diese -

$(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"); 
    }); 
}); 

Grundsätzlich müssen Sie die Aktion auszuführen Diese Funktion wird innerhalb Ihrer #cross-Klickfunktion ausgeführt, auch beim Laden des Dokuments, um diesen als Anfangszustand zu haben.

Umhüllen Sie es in einem function wird Ihnen helfen, die Funktionalität nach dem Schließen alle an einem Ort ausgeführt werden. Ich empfehle Ihnen, das Seitenmenü ähnlich darzustellen, indem Sie die Aktionen in eine Funktion einfügen und wie oben beschrieben aufrufen.

Answer 3

Sie können versuchen, die Klassen in der HTML-Seite hinzufügen, so wird es mit der Seitenleiste ausgeblendet.

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

Oder Sie verwenden:

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

Innen $(document).ready(); so, wenn es geladen wird, das Bild, das die Seitenleiste schaltet wird angeklickt.