如何使用侧边栏隐藏加载我的页面

问题描述：

我创建了一个隐藏在.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"); 
});

}）;

最佳，约翰

答

只需添加TGE hide_menu类的加价：

<div class="sidebar_menu hide_menu">

答

试试这个 -

$(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中将帮助您保持在一个地方关闭所有功能时执行的功能。我建议你通过在一个函数中包装动作并像上面调用它一样来显示侧边菜单。

答

您可以尝试在HTML页面中添加类，因此它会隐藏边栏加载。

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

或者你可以使用：

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

里面$(document).ready();所以当它加载，即切换侧栏中的图像被点击。

如何使用侧边栏隐藏加载我的页面

相关推荐