Question

我是jQuery代码的新手。我试图开发一个“整页菜单”，但是我在第二次点击时隐藏menù有些困难..我试过.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 Whit这个代码当我点击menù时才显示！

Answer 1

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

$("#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

我建议使用CSS过渡并添加一个类来表示菜单处于活动状态。

以下是代码的jsfiddle：{{3}}

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 - 在菜单打开时添加了新类。添加了对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');
        }
    });    
});

Answer 3

使用标志来设置/恢复动画。

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

小提琴 http://jsfiddle.net/975va7qv/。

jQuery，点击显示/隐藏绝对div

3 个答案: