9

進行状況バー/ラベルを使用して寄付の進行状況を示す職場で継承したサイトに取り組んでいます。リストの大部分は 9 年分 (例: 1990 年から 1999 年) ですが、最後のリストには 13 年分 (2000 年から 2012 年) があります。showHiddenBars()このため、それぞれの要素を表示/非表示にする JavaScript 関数があります。

最初のロードでは、すべてが正しく表示されます (デフォルトでは 2000-2012 が表示されます) が、それらを非表示にしてから表示すると、レイアウトが台無しになります。Google Chrome のインスペクターからわかることは、.show()関数が使用されるとstyle="display: inline-block"、ラベルを格納するスパン要素に追加されるということです。clipshow および hide 関数で jQuery UIのイージング効果を使用しています。

.show が style="display: inline-block;" を追加しないようにするにはどうすればよいですか

完全な Javascript: http://pastebin.com/ZmbQqwWF

完全な HTML: http://pastebin.com/mf6W1ahF

サンプル サイト: http://kirsches.us/3000Strong/decadeProgress.html

ジャバスクリプト：

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 に答える