jQuery .show() dodaje style = "display: inline-block" do elementów

Pracuję na stronie, którą odziedziczyłem w pracy, która pokazuje postęp darowizny za pomocą pasków postępu/etykiet. Większość list będzie miała 9 lat w (np. 1990-1999), ale ostatnia ma 13 (2000-2012). Z tego powodu mam funkcję javascript showHiddenBars(), która pokazuje/ukrywa odpowiednie elementy.jQuery .show() dodaje style = "display: inline-block" do elementów

Po pierwszym załadowaniu wszystko jest wyświetlane poprawnie (domyślnie wyświetlane jest 2000-2012), ale po ich ukryciu, a następnie wyświetleniu, powoduje to uszkodzenie układu. Z tego, co mogę powiedzieć za pomocą inspektora Google Chrome, wynika, że gdy używana jest funkcja .show(), dodaje ona style="display: inline-block" do mojego elementu span, który zawiera etykietę. Używam efektu łagodzenia jQuery UI z funkcjami show i hide.

Jak zapobiec .show z dodaniem stylu = "display: inline-block;"

Pełna Javascript: http://pastebin.com/ZmbQqwWF

Full HTML: http://pastebin.com/mf6W1ahF

Przykład strony: 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-->

Źródło

2013-03-28 kkirsche

Jakie jest twoje pytanie? – jmoerdyk

Jak zapobiec .show z dodaniem style = "display: inline-block;" – kkirsche

jawnie ustawić styl dla widoczności tak, jak chcesz it: nie polegaj na hide() i show():

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

Źródło

2013-03-28 19:03:18

show() nie ustawia wyświetlania: inline-block. Ustawi to na dowolną wartość początkową w css. Jeśli więc wartość początkowa jest blokowa, ustawi się na blok. Jeśli display: none jest używane w css, to domyślnie wyświetli: inline. – JSON

Wygląda na to, że 'show()' spowoduje wyświetlenie CSS 'display: block;', zobacz https://stackoverflow.com/q/9260009/1066234 –

Myślę, że jeśli styl defaut dla elementu jest wbudowany, to doda blok inline, przynajmniej dla list wyboru, dodaje również blok inline. Jeśli trzeba dodać blok następnie użyć .css

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

Można nadal używać .hide(), aby ukryć, że nie trzeba zmieniać

Źródło

2013-03-28 19:02:41 Huangism

jQuery .show() dodaje style = "display: inline-block" do elementów

Odpowiedz

Powiązane problemy