Ich arbeite an einer Site, die ich bei meiner Arbeit geerbt habe und die den Fortschritt der Spende anhand von Fortschrittsbalken / Etiketten anzeigt. Die meisten Listen haben 9 Jahre (z. B. 1990-1999), die letzte jedoch 13 (2000-2012). Aus diesem Grund habe ich eine JavaScript-Funktion showHiddenBars() , die die entsprechenden Elemente anzeigt / versteckt.
Beim ersten Laden wird alles korrekt angezeigt (standardmäßig wird "2000-2012" angezeigt), aber nachdem Sie sie ausgeblendet und dann angezeigt haben, wird das Layout durcheinander gebracht. Was ich über den Inspector von Google Chrome feststellen kann ist, dass wenn die .show() -Funktion verwendet wird, style="display: inline-block" zu meinem span-Element hinzugefügt wird, das das Label enthält. Ich verwende den clip -Effekt der jQuery-Benutzeroberfläche mit den Funktionen zum Ein- und Ausblenden.
Wie verhindere ich das Hinzufügen von style="display: inline-block;"
Volles Javascript: Ссылка
Vollständiger HTML-Code: Ссылка
Beispielseite: Ссылка
Das Javascript:
%Vor%Das HTML:
%Vor%Legen Sie den Stil für die Sichtbarkeit explizit so fest, wie Sie möchten: Verlassen Sie sich nicht auf hide () und show ():
%Vor%Ich denke, wenn der Defaut-Stil für das Element inline ist, dann fügt es Inline-Block hinzu, zumindest für ausgewählte Dropdowns fügt es auch Inline-Block hinzu. Wenn Sie einen Block hinzufügen müssen, verwenden Sie die .css
%Vor%Sie können immer noch .hide () zum Verbergen verwenden, das muss nicht geändert werden