javascript - 按下辅助按钮时关闭按钮上的事件状态

Question

我在关闭页脚按钮的事件状态时遇到问题。当您单击 footer 时，它会滑动一个隐藏的 div，将 fix div 向上推，并将 footer 更改为关闭，并为其事件状态设置背景颜色。单击关闭后，div 将向下滑动，文字将变回页脚，事件状态将隐藏。

问题

当我单击菜单按钮时，它不会更改页脚按钮上的事件状态。 div 会向下滑动，但文字不会从 close 变为 footer，背景颜色也不会改变。

JS

$('#more').click(function () {
    var open = $('header').is('.open');
    $('#footerPanel')['slide' + (open ? 'Up' : 'Down')](400);
    $('header').animate({
        bottom: (open ? '-' : '+') + '=120'
    }, 400, function () {
        $('header').toggleClass('open');
    });                 
});
$('#menu').click(function () {
    if ($('header').is('.open')) {
        $('header').removeClass('open').animate({'bottom': "-=120"});
        $('#footerPanel').slideUp(400);
    }
});
$('.footerButton').click(function(){
    var $this = $(this);
    $this.toggleClass('footerButton');
    if($this.hasClass('footerButton')){
        $this.text('Footer');           
    } 
    else 
    {
        $this.text('Close');
    }
    $(this).toggleClass('activetoggle');
});

我的 Fiddle . 我该如何解决这个问题？

Answer 1

我添加了以下函数作为单击菜单按钮时 animate 函数的回调。它将检查页脚按钮是否处于事件状态，如果是，将进行相应更新，否则将保持不变。

function () {
    var $footer = $('.activetoggle');

    if ($footer.length)
        $footer
            .toggleClass('activetoggle footerButton')
            .text('Footer');
}

Updated Fiddle