jQuery .show() fügt style="display:inline-block" - Elemente

Ich arbeite an einer Website, die ich geerbt, bei der Arbeit, zeigt die Spende Fortschritt mit progress-bars /- Beschriftungen. Die Mehrheit der Listen, die haben 9 Jahre in der (z.B. 1990-1999), aber die letzten 13 (2000-2012). Weil dieses, ich habe eine javascript-Funktion showHiddenBars() was zeigt /verbirgt die jeweiligen Elemente.

Beim ersten laden, wird alles korrekt angezeigt (2000-2012 wird standardmäßig angezeigt), aber nach verstecken und dann zeigt Sie, es versaut das layout. Was ich sagen kann, über Google Chrome Inspektor ist, dass, wenn die .show() - Funktion verwendet wird, es ist das hinzufügen style="display: inline-block" zu meiner span-element, welche Häuser das label. Ich bin mit der clip easing-Effekt von jQuery UI mit dem ein-und ausblenden von Funktionen.

Wie kann ich das verhindern .Karte hinzufügen style="display: inline-block;"

Vollständigen Javascript: http://pastebin.com/ZmbQqwWF

Vollständige HTML: http://pastebin.com/mf6W1ahF

Beispiel Website: 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-->

Was ist deine Frage?
Wie kann ich das verhindern .Karte hinzufügen style="display: inline-block;"

InformationsquelleAutor kkirsche | 2013-03-28

15

Explizit den Stil der Sichtbarkeit, wie Sie es wollen: verlassen Sie sich nicht auf hide() und show():
```
element.css('display', 'none'); equivalent of hide()
element.css('display', 'inline-block'); equivalent of show()
element.css('display', 'block'); What you want
```
- show() nicht display:inline-block. Es wird es immer der erste Wert ist in der css. Also, wenn der Startwert wird blockiert, es wird auf "blockieren" eingestellt. Wenn display:none in die css, dann wird es standardmäßig auf display:inline.
- Es scheint, dass show() führt in CSS display:block; finden Sie unter stackoverflow.com/q/9260009/1066234
InformationsquelleAutor Sabu's Lead Coder
3

Ich denke, wenn die defaut-Stil für das element inline-dann wird es inline-block, zumindest für select-dropdowns es fügt auch inline-block -. Wenn Sie brauchen, um block hinzufügen, dann verwenden Sie das .css
```
$('#el').css('display','block');
```
Können Sie immer noch verwenden .hide() zu verstecken, das braucht nicht zu ändern,

InformationsquelleAutor Huangism

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.