javascript - jQuery切换菜单问题

我有一个要显示的侧边栏，当我单击“导航”文本时全屏淡入整个页面。

我有它，使它出现，并且标题文本向左移动，但是如何使其具有响应性，这样当我退出侧边栏时，标题会恢复原状，并且淡出消失吗？边栏出现时，我也无法使淡入淡出起作用。

这是我所拥有的：

我的.js文件：

    $(function() {
  $(".nav").click(function() {

    $(".sidebar").animate({width: 'toggle'});
    $('.fade').fadeIn();
    $(".cbp-af-header").animate({left: "-57px"}, 400);

  })
})

HTML：

<div class="nav">
<nav>
Click
</nav>

  </div>

    <div class="sidebar">
   <div class="nav">
<nav>
Click (So I can exit)
</nav>

  </div>
</div>

<div id="fade"></div>

CSS：

#fade {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    opacity: 0.5; }


#fade { display: none; }

sidebar {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-attachment: scroll;
  right: 0;
  top: 0;
  width: 20%;
  height: 100%;
  position:fixed;
  background-color: #dafaea;
  z-index:1000;
  background:
  linear-gradient(to bottom right,rgba(102, 183, 176, 0.9), rgba(254, 240, 232, 1)),
  url('http://i60.tinypic.com/21ke9u9.gif') center center;
  // background-size: cover; 218, 250, 234, 0.9



 }

.sidebar { display: none; }

非常感谢！

最佳答案

jQuery有多种方法可以执行此操作，您可以尝试使用某种标志来标记侧边栏元素（或实际上是任何元素），以指示是否显示该元素，并使click（）函数根据该标志而有所不同。

您可能会得到如下所示的结果：

$(function() {
  $(".nav").click(function() {
    // Just cacheing the sidebar element so that we don't query it every time
    var sidebar = $(".sidebar");

    if (sidebar.hasClass("visible")) {
        // Do stuff if the sidebar is visible: hide it, remove the .fade and mave the header back
        sidebar.animate({width: 'toggle'});
        $(".fade").fadeOut();
        $(".cbp-af-header").animate({left: "-57px"}, 400);

        // Remove the .visible class from .sidebar
        sidebar.removeClass("visible");
    }
    else {
        // Do stuff if the sidebar is not visible: show it and the .fade, and move the header
        sidebar.animate({width: 'toggle'});
        $(".fade").fadeIn();

        // Put the initial value of the left property of .cbp-af-header
        $(".cbp-af-header").animate({left: "0px"}, 400);

        // Tag the .sidebar with the .visible class
        sidebar.addClass("visible");
    }
  })
})

干杯