Javascript 如何在侧边栏隐藏的情况下加载我的页面

我创建了一个侧边栏，它使用.click（）函数隐藏，目标是id为“cross”的图像

我的目标是让页面加载时没有侧栏（.sidebar_menu）可见，并且我的菜单汉堡（.bar）可见。我该怎么做

HTML:

}))

最好的，

---

John

只需将tge

隐藏菜单

类添加到您的标记中即可：

试试这个-

$(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 click函数中执行操作，也需要在文档加载中执行操作，以将其作为初始状态

---

将其包装在

函数中

将有助于将关闭后要执行的功能保留在一个位置。我建议您通过将操作包装到函数中并像上面那样调用它来显示侧菜单。您可以尝试在HTML页面中添加类，以便在加载时隐藏侧栏

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

内部

$（document）.ready（）
$(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");
  });
});

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

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