web-dev-qa-db-ja.com

jQuery .show（）は、style = "display：inline-block"を要素に追加します

プログレスバー/ラベルを使用して寄付の進捗状況を表示する、職場で継承したサイトで作業しています。リストの大部分は9年（例：1990-1999）ですが、最後のリストは13年（2000-2012）です。このため、それぞれの要素を表示/非表示にするjavascript関数showHiddenBars()があります。

最初のロードでは、すべてが正しく表示されます（デフォルトでは、2000〜2012が表示されます）が、非表示にしてから表示すると、レイアウトが混乱します。 Google Chromeのインスペクターでわかることは、.show()関数を使用すると、ラベルを格納するspan要素にstyle="display: inline-block"が追加されることです。 jQueryUIのclipイージング効果をshow関数とhide関数で使用しています。

.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-->
jquerycssjquery-uishow-hide
9
kkirsche

可視性のスタイルを希望どおりに明示的に設定します。hide（）とshow（）に依存しないでください。

element.css('display', 'none'); equivalent of hide()
element.css('display', 'inline-block'); equivalent of show()
element.css('display', 'block'); What you want
15
Sabu's Lead Coder

要素のデフォルトスタイルがインラインの場合、インラインブロックが追加されます。少なくとも一部のドロップダウンでは、インラインブロックも追加されます。ブロックを追加する必要がある場合は、.cssを使用してください

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

.hide（）を使用して非表示にすることはできますが、変更する必要はありません

3
Huangism