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

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

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/

jQuery按钮只能工作一次

3 个答案: