javascript - jQuery 按钮只能工作一次

Question

我的目标是创建一个简单的按钮，单击该按钮将隐藏/显示导航菜单，并交替更改页脚的填充，如果不是后一种情况，我会使用 toggle() .我如何使按钮同时用于两个目的，即首先隐藏菜单并减少页脚填充，然后再单击一次显示菜单并增加填充，依此类推，以便在单击按钮时会发生一种效果，然后另一个点击另一个？任何帮助、建议或替代方案，我们将不胜感激。

function collapseOrCondense(event) {
    if ($('#block-panels-mini-footer-nice-menu:visible')) {
        $('#footer').css({
            'padding-bottom': '2.5%'
        });
        $('#block-panels-mini-footer-nice-menu').hide();
    } else {
        $('#footer').css({
            'padding-bottom': '5.5%'
        });
        $('#block-panels-mini-footer-nice-menu').show();
    }
};
$('#footer').append('<button type=button class=cbutton>*</button>');
$('#footer .cbutton').css({
    'position': 'absolute',
    'left': '1%',
    'top': '1%',
    'width': '2%',
    'height': '1.5%'
});
$('#footer .cbutton').on('click', collapseOrCondense);

Answer 1

我在这里做了一个例子。 http://jsfiddle.net/wdakLfcc/2/

var visible = true;
function collapseOrCondense(event) {
if (visible) {
    $('#footer').css({
        'padding-bottom': '2.5%'
    });
    $('#block-panels-mini-footer-nice-menu').hide();
    visible = false;

} else {
    $('#footer').css({
        'padding-bottom': '5.5%'
    });
    $('#block-panels-mini-footer-nice-menu').show();
    visible = true;
}    

};
$('#footer').append('<button type=button class=cbutton>*</button>');
$('#footer .cbutton').css({
'position': 'absolute',
'left': '1%',
'top': '1%',
'width': '2%',
'height': '1.5%'
});
$('#footer ').on('click', '.cbutton', collapseOrCondense);

点击按钮会产生不同的效果——折叠或压缩。