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

在按钮上单击将播放不同的效果 - 折叠或冷凝。

Answer 2

从我的分析看，你的条件总是评估为真。 我建议你添加一些其他形式的指标，以更好地区分切换。

我陪审团操纵了一个简单的实现： http ： //plnkr.co/edit/y8BugzI89s0i5kxM95H9？p = preview

function collapseOrCondense(event){
  if($('#block-panels-mini-footer-nice-menu').css('display') === 'block'){
    $('#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();
  }
}

在我的演示环境中，前面提到的代码片段是处理这种情况的一种方式 - 我确信有很多方法，但潜在的问题是你的条件（至少在我提供数据的情况下）总是评估为true。

Answer 3

你有这个问题：

if ($('#block-panels-mini-footer-nice-menu:visible')) {

因为这将返回一个内部带有一个或零个元素的jQuery对象。 您可以通过添加.length来解决这个问题。 但我认为使用is函数更清晰。

在这里我修复了它，并应用了一些可能有助于您以更简洁的方式执行相同操作的更改：

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

工作小提琴： http ： //jsfiddle.net/yj5evps2/