javascript - 为什么变量没有注册为 true 以使第二个 if 语句起作用？

Question

我正在尝试创建一个 slider 菜单，该菜单从底部(页脚)向上滑动到顶部，单击时返回到底部(页脚)。我的代码与第一个 if 语句配合得很好，它没有注册 var SlideUp == true，因此，单击 slider 时 slider 不会返回。

这是我的 JS 文件:

$(document).ready(function(){

   var sliderUp = false;
     if (sliderUp == false) {
        $("#slider").click( function(){
           $(this).animate({height:'100%'},200);
           sliderUp = true;
           console.log('pullUp');
           $('.firsts').fadeOut(100);
        }); 
     } 


 if (sliderUp == true) {
    $("#slider").click( function(){
       $(this).animate({height:'50px'},200);
       sliderUp = false;
       console.log(sliderUp);
       console.log('pullDown');
       $('.firsts').fadeIn(100);
   });  
 }
 });

这是我的 CSS:

#slider{
    background: orange;
    color: white;
    height: 50px;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
 }

Answer 1

您可以使用 .toggle 来实现您的要求，而不是使用 if 和 else 使代码变得复杂。

$('#slider').toggle(
    function(){
        $(this).animate({height:'100%'},200);
        console.log('pullUp');
        $('.firsts').fadeOut(100);
    },
    function(){
        $(this).animate({height:'50px'},200);
        console.log('pullDown');
        $('.firsts').fadeIn(100);
    }
);