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

【问题标题】：how to load my page with sidebar hidden如何在隐藏侧边栏的情况下加载我的页面
【发布时间】：2017-08-10 20:42:39
【问题描述】：

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

});

最好，约翰

【问题讨论】：

标签： javascript jquery html css sidebar

【解决方案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 函数中执行的操作，也需要在文档加载时将其作为初始状态。

将其包装在 function 中将帮助您将功能保持在一个地方关闭时执行。我建议您通过将操作包装在一个函数中并像上面一样调用它来显示侧边菜单。

【讨论】：

【解决方案2】：

您可以尝试在 HTML 页面中添加类，以便加载时隐藏侧边栏。

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

或者你可以使用：

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

在$(document).ready(); 内部，所以当它加载时，切换侧边栏的图像会被点击。

【讨论】：

【解决方案3】：

只需在您的标记中添加 tge hide_menu 类：

<div class="sidebar_menu hide_menu">

【讨论】：