jQuery .show() 为元素添加 style="display:inline-block"
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15689966/
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
jQuery .show() adds style="display:inline-block" to elements
提问by kkirsche
I'm working on a site I inherited at work that shows donation progress using progress bars / labels. The majority of the lists will have 9 years in the (e.g. 1990-1999) but the last one has 13 (2000-2012). Because of this, I have a javascript function showHiddenBars()which shows / hides the respective elements.
我正在一个我在工作中继承的网站上工作，该网站使用进度条/标签显示捐赠进度。大多数列表将有 9 年（例如 1990-1999），但最后一个列表有 13 年（2000-2012）。因此，我有一个 javascript 函数showHiddenBars()来显示/隐藏相应的元素。
On first load, everything displays correctly (2000-2012 is displayed by default) but after hiding them and then showing them, it messes up the layout. From what I can tell via Google Chrome's inspector is that when the .show()function is used it is adding style="display: inline-block"to my span element which houses the label. I am using the clipeasing effect of jQuery UI with the show and hide functions.
第一次加载时，所有内容都显示正确（默认显示 2000-2012），但是在隐藏它们然后显示它们之后，它会弄乱布局。从我通过谷歌浏览器的检查器可以看出的是，当使用该.show()功能时，它会添加style="display: inline-block"到我的包含标签的 span 元素中。我正在使用clip带有显示和隐藏功能的 jQuery UI的缓动效果。
How do I prevent .show from adding style="display: inline-block;"
如何防止 .show 添加 style="display: inline-block;"
Full Javascript: http://pastebin.com/ZmbQqwWF
完整的 Javascript：http: //pastebin.com/ZmbQqwWF
Full HTML: http://pastebin.com/mf6W1ahF
完整的 HTML：http: //pastebin.com/mf6W1ahF
Example Site: http://kirsches.us/3000Strong/decadeProgress.html
示例站点：http: //kirsches.us/3000Strong/decadeProgress.html
The javascript:
javascript：
function showHiddenBars() {
"use strict";
//show the bars we aren't using.
$('#decade10').show("clip");
$('#decade11').show("clip");
$('#decade12').show("clip");
$('#decade13').show("clip");
$('#decade10label').show("clip");
$('#decade11label').show("clip");
$('#decade12label').show("clip");
$('#decade13label').show("clip");
$('#decade10AmountGiven').show("clip");
$('#decade11AmountGiven').show("clip");
$('#decade12AmountGiven').show("clip");
$('#decade13AmountGiven').show("clip");
}
function hideHiddenBars() {
"use strict";
//hide the bars we aren't using.
$('#decade10').hide("clip");
$('#decade11').hide("clip");
$('#decade12').hide("clip");
$('#decade13').hide("clip");
$('#decade10label').hide("clip");
$('#decade11label').hide("clip");
$('#decade12label').hide("clip");
$('#decade13label').hide("clip");
$('#decade10AmountGiven').hide("clip");
$('#decade11AmountGiven').hide("clip");
$('#decade12AmountGiven').hide("clip");
$('#decade13AmountGiven').hide("clip");
}
The HTML:
HTML：
<div id="decadeProgressContainer">
<span class="titleFontNoBorder" id="decade1label">2000</span>
<div id="decade1" class="progressBarSpacingTop"></div>
<span id="decade1AmountGiven">0,000</span><br />
<span class="titleFontNoBorder" id="decade2label">2001</span>
<div id="decade2" class="progressBarSpacing"></div>
<span id="decade2AmountGiven">0,000</span><br />
<span class="titleFontNoBorder" id="decade3label">2002</span>
<div id="decade3" class="progressBarSpacing"></div>
<span id="decade3AmountGiven">0,000</span><br />
<span class="titleFontNoBorder" id="decade4label">2003</span>
<div id="decade4" class="progressBarSpacing"></div>
<span id="decade4AmountGiven">0,000</span><br />
<span class="titleFontNoBorder" id="decade5label">2004</span>
<div id="decade5" class="progressBarSpacing"></div>
<span id="decade5AmountGiven">0,000</span><br />
<span class="titleFontNoBorder" id="decade6label">2005</span>
<div id="decade6" class="progressBarSpacing"></div>
<span id="decade6AmountGiven">0,000</span><br />
<span class="titleFontNoBorder" id="decade7label">2006</span>
<div id="decade7" class="progressBarSpacing"></div>
<span id="decade7AmountGiven">0,000</span><br />
<span class="titleFontNoBorder" id="decade8label">2007</span>
<div id="decade8" class="progressBarSpacing"></div>
<span id="decade8AmountGiven">0,000</span><br />
<span class="titleFontNoBorder" id="decade9label">2008</span>
<div id="decade9" class="progressBarSpacing"></div>
<span id="decade9AmountGiven">0,000</span><br />
<span class="titleFontNoBorder" id="decade10label">2009</span>
<div id="decade10" class="progressBarSpacing"></div>
<span id="decade10AmountGiven">0,000</span><br />
<span class="titleFontNoBorder" id="decade11label">2010</span>
<div id="decade11" class="progressBarSpacing"></div>
<span id="decade11AmountGiven">0,000</span><br />
<span class="titleFontNoBorder" id="decade12label">2011</span>
<div id="decade12" class="progressBarSpacing"></div>
<span id="decade12AmountGiven">0,000</span><br />
<span class="titleFontNoBorder" id="decade13label">2012</span>
<div id="decade13" class="progressBarSpacing"></div>
<span id="decade13AmountGiven">0,000</span>
</div>
<!--end div #decadeProgressContainer-->
回答by Sabu's Lead Coder
Explicitly set the style for the visibility the way you want it: don't rely on hide() and show():
按照您想要的方式显式设置可见性的样式：不要依赖 hide() 和 show()：
element.css('display', 'none'); equivalent of hide()
element.css('display', 'inline-block'); equivalent of show()
element.css('display', 'block'); What you want
回答by Huangism
I think if the defaut style for the element is inline then it will add inline-block, at least for select dropdowns it also adds inline-block. If you need to add block then use the .css
我认为如果元素的默认样式是内联的，那么它将添加内联块，至少对于选择下拉列表，它还会添加内联块。如果您需要添加块，请使用 .css
$('#el').css('display','block');
You can still use .hide() to hide, that does not need to change
您仍然可以使用 .hide() 隐藏，不需要更改
