9

我正在开发一个我在工作中继承的网站，该网站使用进度条/标签显示捐赠进度。大多数列表将有 9 年（例如 1990-1999），但最后一个列表有 13 年（2000-2012）。因此，我有一个showHiddenBars()显示/隐藏相应元素的 javascript 函数。

在第一次加载时，所有内容都正确显示（默认显示 2000-2012），但在隐藏它们然后显示它们之后，它会弄乱布局。从我可以通过谷歌浏览器的检查器得知的是，当使用该.show()功能时，它会添加style="display: inline-block"到包含标签的 span 元素中。我正在使用clip带有显示和隐藏功能的 jQuery UI 的缓动效果。

如何防止 .show 添加 style="display: inline-block;"

完整的 Javascript： http: //pastebin.com/ZmbQqwWF

完整的 HTML： http: //pastebin.com/mf6W1ahF

示例站点： http: //kirsches.us/3000Strong/decadeProgress.html

的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");
}

的HTML：

<div id="decadeProgressContainer">
    <span class="titleFontNoBorder" id="decade1label">2000</span>
    <div id="decade1" class="progressBarSpacingTop"></div>
    <span id="decade1AmountGiven">$130,000</span><br />

    <span class="titleFontNoBorder" id="decade2label">2001</span>
    <div id="decade2" class="progressBarSpacing"></div>
    <span id="decade2AmountGiven">$130,000</span><br />

    <span class="titleFontNoBorder" id="decade3label">2002</span>
    <div id="decade3" class="progressBarSpacing"></div>
    <span id="decade3AmountGiven">$130,000</span><br />

    <span class="titleFontNoBorder" id="decade4label">2003</span>
    <div id="decade4" class="progressBarSpacing"></div>
    <span id="decade4AmountGiven">$130,000</span><br />

    <span class="titleFontNoBorder" id="decade5label">2004</span>
    <div id="decade5" class="progressBarSpacing"></div>
    <span id="decade5AmountGiven">$130,000</span><br />

    <span class="titleFontNoBorder" id="decade6label">2005</span>
    <div id="decade6" class="progressBarSpacing"></div>
    <span id="decade6AmountGiven">$130,000</span><br />

    <span class="titleFontNoBorder" id="decade7label">2006</span>
    <div id="decade7" class="progressBarSpacing"></div>
    <span id="decade7AmountGiven">$130,000</span><br />

    <span class="titleFontNoBorder" id="decade8label">2007</span>
    <div id="decade8" class="progressBarSpacing"></div>
    <span id="decade8AmountGiven">$130,000</span><br />

    <span class="titleFontNoBorder" id="decade9label">2008</span>
    <div id="decade9" class="progressBarSpacing"></div>
    <span id="decade9AmountGiven">$130,000</span><br />

    <span class="titleFontNoBorder" id="decade10label">2009</span>
    <div id="decade10" class="progressBarSpacing"></div>
    <span id="decade10AmountGiven">$130,000</span><br />

    <span class="titleFontNoBorder" id="decade11label">2010</span>
    <div id="decade11" class="progressBarSpacing"></div>
    <span id="decade11AmountGiven">$130,000</span><br />

    <span class="titleFontNoBorder" id="decade12label">2011</span>
    <div id="decade12" class="progressBarSpacing"></div>
    <span id="decade12AmountGiven">$130,000</span><br />

    <span class="titleFontNoBorder" id="decade13label">2012</span>
    <div id="decade13" class="progressBarSpacing"></div>
    <span id="decade13AmountGiven">$130,000</span>
</div>
<!--end div #decadeProgressContainer-->
4

2 回答 2

15

以您想要的方式显式设置可见性的样式：不要依赖 hide() 和 show()：

element.css('display', 'none'); equivalent of hide()
element.css('display', 'inline-block'); equivalent of show()
element.css('display', 'block'); What you want
于 2013-03-28T19:03:18.493 回答
3

我认为如果元素的默认样式是内联的，那么它将添加内联块，至少对于选择下拉菜单，它也会添加内联块。如果您需要添加块，请使用 .css

$('#el').css('display','block');

您仍然可以使用 .hide() 隐藏，不需要更改

于 2013-03-28T19:02:41.027 回答