如何使用側邊欄隱藏加載我的頁面

我創建了一個隱藏在.click（）函數中的側欄，其目標圖像的ID爲「cross」。如何使用側邊欄隱藏加載我的頁面

我的目標是讓頁面加載沒有邊欄（.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"); 
});

}）;

最佳，約翰

來源

2017-08-10 JohnH

只需添加TGE hide_menu類的加價：

<div class="sidebar_menu hide_menu">

來源

2017-08-10 20:47:53 Ted

試試這個 -

$(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中將幫助您保持在一個地方關閉所有功能時執行的功能。我建議你通過在一個函數中包裝動作並像上面調用它一樣來顯示側邊菜單。

來源

2017-08-10 20:48:54 Vandesh

您可以嘗試在HTML頁面中添加類，因此它會隱藏邊欄加載。

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

或者你可以使用：

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

裏面$(document).ready();所以當它加載，即切換側欄中的圖像被點擊。

來源

2017-08-10 21:03:20 Juanky

如何使用側邊欄隱藏加載我的頁面

回答

相關問題