javascript - 如何加载隐藏侧边栏的页面

Question

我创建了一个侧边栏，它使用 .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");
});

});

最好， 约翰

Answer 1

试试这个 -

$(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 函数内执行的操作，还需要在文档加载时执行该操作，以将其作为初始状态。

将其包装在函数中将帮助您将关闭时要执行的功能保留在一个位置。我建议您通过将操作包装在函数中并像上面那样调用它来显示侧菜单。