javascript 在jquery中隐藏元​​素而不将显示设置为none

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18462215/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 12:01:30  来源:igfitidea点击:

hide element without setting the display to none in jquery

javascriptjqueryhtmlcss

提问by Obaid Maroof

I want to fold a section of the form without setting its displayto none. If i set the displayto none, the validation is bypassed that is why I don't want to set the displayto none. I know I can set the visibility to hiddenand visiblebut this solution is not feasible for rendering the view as the space for the folded section stays there. This results in a very odd look of the view with an empty white space with no content on it.

我想折叠表单的一部分而不将其设置displaynone. 如果我设置displaynone,验证将被绕过,这就是我不想设置display为的原因none。我知道我可以将可见性设置为hiddenvisible但是这个解决方案对于渲染视图是不可行的,因为折叠部分的空间停留在那里。这会导致视图的外观非常奇怪,上面有一个空白区域,上面没有任何内容。

So my question is to hide a section of the html form (without intacting a placeholder for it) without setting its displayto none, so that I could still perform the validation.

所以我的问题是隐藏 html 表单的一部分(不为其保留占位符)而不将其设置displaynone,以便我仍然可以执行验证。

Some HTML code:

一些 HTML 代码:

<td style="margin: 5px; border-bottom: 1px solid; display:none; overflow: hidden;" colspan="3">
    <div>...</div>
</td>

The displayis initially set to none but once it is unfolded for the first time, I am setting the heightto 100% and removing the displaystyle.

display初始设置为无,但一旦它展开的第一次,我设置height为100%和去除display风格。

回答by CodingIntrigue

You can move it off the screen:

您可以将其移出屏幕:

$(elem).css("position", "absolute").css("left", -9999);

Or set it's height to 0:

或将其高度设置为 0:

$(elem).css("height", 0);

回答by Tibos

The simplest way to fake display:noneis by setting the position to absolute (so the element is taken out of flow, no longer influencing the rendering of outside elements) and the visibility to hidden (so it is no longer painted).

最简单的伪造方法display:none是将位置设置为absolute(这样元素被移出流,不再影响外部元素的渲染)和隐藏的可见性(所以它不再被绘制)。

$(elem).css('visibility', 'hidden').css('position','absolute');

回答by Anil kumar

Set the opacity of the element to 0.

将元素的不透明度设置为 0。

$(elem).css("opacity", 0);

回答by Anil kumar

$("#ele").css({"height" : 0, "width" : 0, "opacity" : 0});

回答by TzoLy

Hiding an element with jquery...

使用 jquery 隐藏元素...

$('element').addClass('hidden');

and in your CSS just use what ever you find appropriate to make that element "hidden"

并在您的 CSS 中使用您认为合适的任何内容来“隐藏”该元素

.hidden{
  /* whatever you find appropriate */
}