Question

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

我有它，所以它出现，我的标题文字向左移动，但我如何使其响应，以便当我退出侧边栏时，我的标题恢复，我的淡入淡出消失？当侧边栏出现时，我也无法使淡入淡出工作。

这就是我所拥有的：

我的.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; }

非常感谢！

Answer 1

使用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");
    }
  })  
})

干杯

Jquery切换菜单问题

1 个答案: