Я работаю над сайтом, который я унаследовал на работе, которая показывает прогресс пожертвования, используя индикаторы выполнения / метки. У большинства списков будет 9 лет (например, 1990-1999), а у последнего - 13 (2000-2012). Из-за этого у меня есть функция JavaScriptshowHiddenBars() который показывает / скрывает соответствующие элементы.

При первой загрузке все отображается правильно (по умолчанию отображается 2000-2012), но после их скрытия и последующего отображения он портит макет. Из того, что я могу сказать через Google Chrome 'с инспектором является то, что когда.show() функция используется это добавлениеstyle="display: inline-block" к моему элементу span, в котором находится ярлык. Я используюclip ослабление эффекта пользовательского интерфейса jQuery с помощью функций show и hide.

Как я могу предотвратить .show от добавления стиля = "дисплей: встроенный блок; "

Полный 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:

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

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

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

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

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

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

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

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

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

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

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

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

    <span class="titleFontNoBorder" id="decade13label">2012</span>
    
    <span id="decade13AmountGiven">$130,000</span>