jQuery、reveal/hide 绝对 div 单击

Question

我是 jQuery 代码的新手。我试图自己开发一个 "full page menu"，但我在第二次单击时很难隐藏菜单。我尝试了 .toggle() 但是我读到那是退休的..你能帮我吗？非常感谢，抱歉我的英语不好。

HTML

<div class="container">   
   <a id="bars" href="#">Apri/Chiudi Menù</a>
</div>

<nav id="nav" class="nav-default">
    <ul>
       <li>Home</li>
       <li>Servizi</li>
       <li>Portfolio</li>
       <li>Contatti</li>
    </ul>
</nav>

CSS

#bars {
   position: fixed;
   z-index: 2;
}

#nav {
   position: absolute;
   width: 100%;
   height: 100%;
   text-align: center;
}

#nav ul {
   list-style: none;
}

.nav-default {
   left: -100%;
   top:0;
   background: #ccc;
}

jQuery

$(document).ready(function() {
   $("#bars").click(
       function (){
           $(".nav-default").animate({
               left: "0"
           }, 1000, function() {
               // Animation complete.
           });
       });    
});

PS 当我点击菜单时这个代码只显示！

Answer 1

您没有为重置动画编写代码。这就是为什么它在这里只移动一次，如果 class 存在移动，我会重置动画。如果您有任何问题，请查看并告诉我。

$("#bars").click(function (){
           var move;
           if(!$(".nav-default").hasClass('moved')){
               var move = 0;
               $(".nav-default").addClass('moved');
           }
           else{
                var move = "-100%";
                $(".nav-default").removeClass('moved');      
            }
             $(".nav-default").animate({
               left: move
           }, 1000);
 });

Fiddle

Answer 2

为 set/revert 动画使用标志。

var flag=0; //Initial value to 0
$(document).ready(function() {
   $("#bars").click(
       function (){
           if(flag==0) //Check here
           $(".nav-default").animate({
               left: "0"
           }, 1000, function() {
               flag=1; 
           });
           else
               $(".nav-default").animate({
               left: "-100%"
           }, 1000, function() {
               flag=0;
           });
       });    
});

Fiddle here.

Answer 3

我建议使用 CSS 转换并添加 class 来表示菜单处于活动状态。

这是以下代码的 jsfiddle：http://jsfiddle.net/975va7qv/

HTML保持不变：

<div class="container">   
   <a id="bars" href="#">Apri/Chiudi Menù</a>
</div>

<nav id="nav" class="nav-default">
    <ul>
       <li>Home</li>
       <li>Servizi</li>
       <li>Portfolio</li>
       <li>Contatti</li>
    </ul>
</nav>

CSS - 在菜单打开时添加了新的 class。向 left 属性添加了一个过渡，使其平稳过渡。

#bars {
   position: fixed;
   z-index: 2;
}

#nav {
   position: absolute;
   width: 100%;
   height: 100%;
   text-align: center;
}

#nav ul {
   list-style: none;
}

.nav-default {
    left: -100%;
    top:0;
    background: #ccc;
    transition: left .5s ease;
}

.nav-default.is-open {
    left: 0
}

JQuery

$(document).ready(function() {
    var nav = $('.nav-default'),
        bar = $('#bars');

    bar.click(function (){
        // Check to see if the nav is open
        if (nav.hasClass('is-open')) {
            // If it is, close it
            nav.removeClass('is-open');
        } else {
            // Nav is closed - open it up
            nav.addClass('is-open');
        }
    });    
});

jQuery、reveal/hide 绝对 div 单击

jQuery, reveal/hide absolute div on click

html

javascript

css

jquery

hide