第二个脚本没有开火

Question

页面上有一个页眉和页脚，当点击“.zoom i.less-view”时，它会消失，它可以完美地运行。然而，替换的切换类“.zoom i.more-view”应该将页眉和页脚返回到它的原始位置似乎没有做任何事情。它改变了html中的类，但是在页眉和页脚方面没有任何反应，我错过了一些明显的东西，任何人都可以提供帮助。 干杯

<div class="zoom" style=" left: 50px;">
  <a class="max" href="#">
    <i class="less-view">gallery view</i>
  </a>
</div>



/** ZOOM HEADER FOOTER */
$(function(){

    $('.zoom i.less-view').click(function(){
        $('header').animate({'top': '-' + $('header').height(), opacity: 0}, 700); 
        $("#handle").animate({opacity: 0}, 700); 
        $("#footer").animate({opacity: 0}, 700);
        $('i.less-view').toggleClass('less-view more-view');

    });  

    $('.zoom i.more-view').click(function(){
        $('header').animate({'top': 0, opacity: 1}, 700);  
        $("#handle").animate({opacity: 1}, 700);          
        $("#footer").animate({opacity: 1}, 700);
        $('i.more-view').toggleClass('less-view more-view');

    });
});

  

这非常有效，谢谢。

    $('.zoom').on('click', 'i.less-view',function(){
    $('header').animate({'top': '-' + $('header').height(), opacity: 0}, 700); 
    $("#handle").animate({opacity: 0}, 700); 
    $("#footer").animate({opacity: 0}, 700);
    $('i.less-view').toggleClass('less-view more-view');

});  

$('.zoom').on('click', 'i.more-view',function(){
    $('header').animate({'top': 0, opacity: 1}, 700);  
    $("#handle").animate({opacity: 1}, 700);          
    $("#footer").animate({opacity: 1}, 700);
     $('i.more-view').toggleClass('less-view more-view');

});
});