Question

我创建了一个隐藏着.click（）函数的侧边栏，其目标是ID为＆＃34; cross＆＃34;。

我的目标是让页面加载时没有可见的侧边栏（.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函数内执行的操作，也需要在文档加载中执行该操作以将其作为初始状态。

将其包装在function中将有助于您在一个地方关闭所有功能。我建议你通过将动作包装在一个函数中并像上面那样调用它来显示侧面菜单。

Answer 2

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

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

或者您可以使用：

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

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

Answer 3

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

<div class="sidebar_menu hide_menu">

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

3 个答案: