jQuery .show() ajoute style=“display:inline-block” pour les éléments

Je travaille sur un site j'ai hérité au travail qui montre don progrès à l'aide de barres de progression et labels. La majorité des listes aura 9 ans dans l' (par exemple, 1990-1999), mais le dernier a 13 (2000-2012). De ce fait, j'ai une fonction javascript showHiddenBars() qui affiche /masque les éléments respectifs.

Sur la première charge, tout s'affiche correctement (2000-2012 est affiché par défaut), mais après les cacher et puis les montrer, il bousille la mise en page. À partir de ce que je peux dire par l'intermédiaire de Google Chrome inspecteur de l'est que lorsque le .show() fonction est utilisée, il est l'ajout style="display: inline-block" à mon élément span qui abrite l'étiquette. Je suis l'aide de la clip effet d'accélération de jQuery UI avec l'afficher et de masquer des fonctions.

Comment puis-je empêcher .montrer à partir de l'ajout de style="display: inline-block;"

En Full Javascript: http://pastebin.com/ZmbQqwWF

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

Exemple De Site: http://kirsches.us/3000Strong/decadeProgress.html

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

Le code 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-->

Quelle est votre question?
Comment puis-je empêcher .montrer à partir de l'ajout de style="display: inline-block;"

OriginalL'auteur kkirsche | 2013-03-28

15

De définir explicitement le style de la visibilité de la façon dont vous le souhaitez: ne comptez pas sur hide() et show():
```
element.css('display', 'none'); equivalent of hide()
element.css('display', 'inline-block'); equivalent of show()
element.css('display', 'block'); What you want
```
show() n'est pas définie display:inline-block. Il permettra de définir à quelle que soit la valeur de départ est dans le css. Donc, si la valeur de départ est à bloc, il sera mis à bloc. Si display:none est utilisé dans le css, il sera par défaut à display:inline.
Il semble que show() entraînera CSS display:block;, voir stackoverflow.com/q/9260009/1066234

OriginalL'auteur Sabu's Lead Coder
3

Je pense que si le defaut style de l'élément est en ligne alors il sera ajouter inline-block, au moins pour sélectionner des listes déroulantes il ajoute également inline-block. Si vous avez besoin d'ajouter un bloc ensuite utiliser .css
```
$('#el').css('display','block');
```
Vous pouvez toujours l'utiliser .hide() à cacher, qui n'a pas besoin de changer

OriginalL'auteur Huangism

Vous devez vous connecter pour publier un commentaire.