Question

$('.invoice_resend').hide();
$('.invoice_resend #update_paid').hide(); 
$('.invoice_send').hide();

所以我上面有这个代码，类invoice_resend是一个div，当点击一个按钮时，它将被隐藏，如上所示，#update_paid和.invoice_send也将被隐藏留给我一个＆＃34; RESIZED DIV ＆＃34;元件。

我想要的是，当隐藏所有其他元素时，.invoice_resend div将保持其高度或需要编辑的任何内容。

修改

好的，这是我的全部代码：

if (selected_tab == 0) { //Released tab


$('.invoice_resend').hide();
$('.invoice_send').show();
}
else if ( selected_tab == 1 ) { //Invoiced tab


$('.invoice_resend').show();
$('.invoice_resend #update_paid').show(); 
$('.invoice_send').hide();
}
else if ( selected_tab == 2 ) { //Paid tab


$('.invoice_resend').show();
$('.invoice_resend #update_paid').hide(); 
$('.invoice_send').hide();
}
else if ( selected_tab == 3 ) { //Pending tab


$('.invoice_resend').hide();
$('.invoice_resend #update_paid').hide(); 
$('.invoice_send').hide();
}

似乎css.({visibility: 'hidden' or 'visible'})完成了这项工作但产生了另一个问题。你看，我有几个标签，所以当我点击隐藏所有元素的最后一个标签时，它会变得不稳定，当我点击另一个标签时显示或隐藏随机元素。上面的代码是我的原始代码，我根据你的答案编辑了.css。

Answer 1

取代show() hide()

使用css属性

visibility:visible; 

visibility:hidden;

此处找到sample demo。

如果您检查，则该元素包含height，即使没有visible。

Answer 2

$('.invoice_resend #update_paid').css({ visibility: 'hidden' });

来自MDN文档：

    The visibility CSS property has two purposes:

 1. The hidden value hides an element but leaves space where it would
    have been.

 2. The collapse value hides rows or columns of a table. It also
    collapses XUL elements.

编辑问题：

if (selected_tab == 0) { //Released tab


$('.invoice_resend').hide();
$('.invoice_send').show();
}
else if ( selected_tab == 1 ) { //Invoiced tab


$('.invoice_resend').show();
$('.invoice_resend #update_paid').css({ visibility: 'visible' }); 
$('.invoice_send').hide();
}
else if ( selected_tab == 2 ) { //Paid tab


$('.invoice_resend').show();
$('.invoice_resend #update_paid').css({ visibility: 'hidden' }); 
$('.invoice_send').hide();
}
else if ( selected_tab == 3 ) { //Pending tab


$('.invoice_resend').hide();
$('.invoice_resend #update_paid').css({ visibility: 'hidden' }); 
$('.invoice_send').hide();
}

Answer 3

只需创建另一个div并将invoice_resend div放入其中并在css中设置父div的宽度和高度。

Answer 4

你也可以扩展jQuery来创建你自己的show / hide类，并在那里划分：

jQuery.fn.myShow = function() {
    var o = $(this[0]); 
    o.addClass("show").removeClass("hide");
};
jQuery.fn.myHide = function() {
    var o = $(this[0]);
    o.addClass("hide").removeClass("show");
};

$('.invoice_resend').myHide();

.hide {
    visibility:hidden; 
}

如何通过jquery维护div的大小？

4 个答案: