Проблемы с меню jquery toggle

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

Приветствиях