it-swarm.com.de

Wie kann ich ein Element mit Twitter Bootstrap verstecken und mit jQuery anzeigen?

Angenommen, ich erstelle ein HTML-Element wie dieses,

<div id="my-div" class="hidden">Hello, TB3</div>
<div id="my-div" class="hide">Hello, TB4</div>
<div id="my-div" class="d-none">Hello, TB4</div>

Wie kann ich dieses HTML-Element in jQuery/Javascript ein- und ausblenden?.

JavaScript:

$(function(){
  $("#my-div").show();
});

Ergebnis: (mit einem davon).

Ich möchte, dass die obigen Elemente ausgeblendet werden.

Was ist der einfachste Weg, um ein Element mit Bootstrap auszublenden und mit jQuery anzuzeigen?

213
psylosss

Die richtige Antwort

Bootstrap 4.x

Bootstrap 4.x verwendet die neue .d-none Klasse . Anstatt entweder .hidden oder .hide zu verwenden, wenn Sie Bootstrap 4 verwenden .x benutze .d-none.

<div id="myId" class="d-none">Foobar</div>
  • So zeigen Sie es: $("#myId").removeClass('d-none');
  • Um es auszublenden: $("#myId").addClass('d-none');
  • Um es umzuschalten: $("#myId").toggleClass('d-none');

(dank des Kommentars von Fangming)

Bootstrap 3.x

Verwenden Sie zuerst .hide nicht! Verwenden Sie .hidden. Wie andere gesagt haben, .hide ist veraltet,

.hide ist verfügbar, wirkt sich jedoch nicht immer auf Bildschirmleseprogramme aus und ist ab Version 3.0.1 veraltet

Verwenden Sie zweitens jQueries . ToggleClass () , . AddClass () und . RemoveClass ()

<div id="myId" class="hidden">Foobar</div>
  • So zeigen Sie es: $("#myId").removeClass('hidden');
  • Um es auszublenden: $("#myId").addClass('hidden');
  • Um es umzuschalten: $("#myId").toggleClass('hidden');

Verwenden Sie nicht die CSS-Klasse .show, sie hat einen sehr kleinen Anwendungsfall. Die Definitionen von show, hidden und invisible befinden sich in docs .

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}
356
Evan Carroll

Einfach:

$(function(){
  $("#my-div").removeClass('hide');
});

Oder wenn Sie irgendwie wollen, dass die Klasse noch da ist:

$(function(){
  $("#my-div").css('display', 'block !important');
});
65
Razz

Die Klasse hide ist nützlich, um den Inhalt beim Laden der Seite verborgen zu halten.

Meine Lösung hierfür ist, während der Initialisierung auf jquery's hide zu wechseln:

$('.targets').hide().removeClass('hide');

Dann sollten show() und hide() wie gewohnt funktionieren.

15
Dustin Graham

Verwenden Sie bootstrap .collapse anstelle von .hidden

Später in JQuery können Sie es mit .show () oder .hide () bearbeiten

14
Iván

Eine andere Möglichkeit, diesem Ärger zu begegnen, besteht darin, eine eigene CSS-Klasse zu erstellen, die das! Important am Ende der Regel nicht setzt:

.hideMe {
    display: none;
}

und so verwendet:

<div id="header-mask" class="hideMe"></div>

und jetzt funktioniert das Verstecken von jQuery

$('#header-mask').show();
13
dbrin

Die beschriebene Methode @ dustin-graham ist, wie ich es auch mache. Denken Sie auch daran, dass bootstrap 3 jetzt "hidden" anstelle von "hide" verwendet (siehe Dokumentation unter getbootstrap ). Also würde ich so etwas machen:

$(document).ready(function() {
    $('.hide').hide().removeClass('hide');
    $('.hidden').hide().removeClass('hidden');
});

Wenn Sie dann die Methoden jQuery show() und hide() verwenden, liegt kein Konflikt vor.

5
MichaelJTaylor

Initiieren Sie das Element mit:

<div id='foo' style="display: none"></div>

Verwenden Sie dann das Ereignis, das Sie anzeigen möchten:

$('#foo').show();

Der einfachste Weg, glaube ich.

5

HTML:

<div id="my-div" class="hide">Hello, TB3</div>

Javascript:

$(function(){
    //If the HIDE class exists then remove it, But first hide DIV
    if ( $("#my-div").hasClass( 'hide' ) ) $("#my-div").hide().removeClass('hide');

    //Now, you can use any of these functions to display
    $("#my-div").show();
    //$("#my-div").fadeIn();
    //$("#my-div").toggle();
});
3
Andres Separ

Die Antwort von Razz ist gut, wenn Sie bereit sind, das, was Sie getan haben, umzuschreiben.

War in der gleichen Schwierigkeit und hat folgendes herausgefunden:

/**
 * The problem: https://github.com/twbs/bootstrap/issues/9881
 * 
 * This script enhances jQuery's methods: show and hide dynamically.
 * If the element was hidden by bootstrap's css class 'hide', remove it first.
 * Do similar in overriding the method 'hide'.
 */
!function($) {
    "use strict";

    var oldShowHide = {'show': $.fn.show, 'hide': $.fn.hide};
    $.fn.extend({
        show: function() {
            this.each(function(index) {
                var $element = $(this);
                if ($element.hasClass('hide')) {
                    $element.removeClass('hide');
                }
            });
            return oldShowHide.show.call(this);
        },
        hide: function() {
            this.each(function(index) {
                var $element = $(this);
                if ($element.hasClass('show')) {
                    $element.removeClass('show');
                }
            });
            return oldShowHide.hide.call(this);
        }
    });
}(window.jQuery);

Wirf es weg, wenn Bootstrap ein Update für dieses Problem enthält.

2
badboy

In bootstrap 4 können Sie die Klasse d-none verwenden, um ein Element vollständig auszublenden. https://getbootstrap.com/docs/4.0/utilities/display/

2
Hossein

Bin kürzlich beim Upgrade von 2.3 auf 3.1 darauf gestoßen; Unsere jQuery-Animationen (slideDown) sind kaputt gegangen, weil wir hide auf die Elemente in der Seitenvorlage angewendet haben. Wir sind den Weg gegangen, namentlich getrennte Versionen von Bootstrap Klassen zu erstellen, die jetzt die hässliche ! Wichtige Regel enthalten.

.rb-hide { display: none; }
.rb-pull-left { float: left; }
etc...
2
JacksonT
$(function(){

$("#my-div").toggle();

$("#my-div").click(function(){$("#my-div").toggle()})

})

// Sie müssen nicht einmal den #my-div.hide oder !important setzen, sondern nur den Schalter in der Ereignisfunktion einfügen/wiederholen.

2
Ray C Lin

Ich benutze gerne die toggleClass:

var switch = true; //it can be an JSON value ...
$("#my-div").toggleClass('hide', switch);
2
AndreDurao

Für Bootstrap 4 Alpha 6

Für Bootstrap 4 müssen Sie .hidden-xs-up verwenden.

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes

Die .hidden-up-Klassen verbergen das Element, wenn sich das Ansichtsfenster am angegebenen Haltepunkt oder weiter befindet. Mit .hidden-md-up wird beispielsweise ein Element in mittleren, großen und besonders großen Ansichtsfenstern ausgeblendet.

Es gibt auch das HTML5-Attribut hidden.

https://v4-alpha.getbootstrap.com/content/reboot/#html5-hidden-attribute

HTML5 fügt ein neues globales Attribut mit dem Namen [versteckt] hinzu, das als Anzeige formatiert ist: standardmäßig keine. Ausgeliehen an eine Idee von PureCSS, verbessern wir diesen Standard, indem wir [hidden] {display: none! Wichtig machen; }, um zu verhindern, dass die Anzeige versehentlich überschrieben wird. Während [hidden] von IE10 nicht nativ unterstützt wird, umgeht die explizite Deklaration in unserem CSS dieses Problem.

<input type="text" hidden>

Es gibt auch .invisible, das das Layout beeinflusst.

https://v4-alpha.getbootstrap.com/utilities/invisible-content/

Die .invisible-Klasse kann verwendet werden, um nur die Sichtbarkeit eines Elements umzuschalten. Dies bedeutet, dass die Anzeige nicht geändert wird und das Element weiterhin den Fluss des Dokuments beeinflussen kann.

1
Chloe

hide und hidden sind veraltet und werden später entfernt. Sie sind in neuen Versionen nicht mehr vorhanden. Sie können die Klassen d-none/d-sm-none/invisible usw. je nach Ihren Anforderungen verwenden. Der wahrscheinliche Grund, warum sie entfernt wurden, ist, dass Hidden/Hide im CSS-Kontext etwas verwirrend ist. In CSS wird das Ausblenden (Hidden) für die Sichtbarkeit und nicht für die Anzeige verwendet. Sichtbarkeit und Anzeige sind verschiedene Dinge.

Wenn Sie eine Klasse für die Sichtbarkeit benötigen: hidden, dann benötigen Sie eine unsichtbare Klasse aus den Sichtbarkeits-Dienstprogrammen.

Überprüfen Sie unten die Dienstprogramme für Sichtbarkeit und Anzeige:

https://getbootstrap.com/docs/4.1/utilities/visibility/

https://getbootstrap.com/docs/4.1/utilities/display/

1
Selay

Bootstrap, JQuery, Namespaces ... Was ist los mit einem einfachen:

var x = document.getElementById('my-div');
x.className.replace(/\bhide\b/, ''); //remove any hide class
x.style.display = ''; //show
x.style.display = 'none'; //hide

Sie können eine kleine Hilfsfunktion erstellen, die mit KISS kompatibel ist:

function mydisplay(id, display) {
    var node = (typeof id == 'string') ? document.getElementById(id) : id;
    node.className.replace(/\bhide\b/, '');
    if (node) {
        if (typeof display == 'undefined') {
            display = (node.style.display != 'none');
        } else if (typeof display == 'string' && display == 'toggle') {
            display = mydisplay(node, !mydisplay(node));
        } else {
            node.style.display = (display) ? '' : 'none';
        }
    }
    return display;
}
is_hidden = mydisplay('my-div'); //actual state
mydisplay('my-div', false); //hide
mydisplay('my-div', true); //show
mydisplay('my-div', 'toggle'); //toggle state
0
Edakos

Ich habe mein Problem behoben, indem ich die Bootstrap CSS-Datei bearbeitet habe.

.verbergen, verstecken:

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1

.hide {
  display: none !important;
}

.hidden ist das, was wir jetzt verwenden sollen, aber es ist tatsächlich:

.hidden {
  display: none !important;
  visibility: hidden !important;
}

Die jQuery "fadeIn" funktioniert aufgrund der "Sichtbarkeit" nicht.

Für den neuesten Bootstrap wird .hide nicht mehr verwendet, befindet sich aber immer noch in der Datei min.css. Also habe ich .hidden AS IS verlassen und gerade das "! important" aus der ".hide" -Klasse entfernt (was vermutlich sowieso veraltet ist). Sie können es aber auch einfach in Ihrem eigenen CSS überschreiben. Ich wollte nur, dass alle meine Anwendungen gleich funktionieren, also habe ich die Bootstrap CSS-Datei geändert.

Und jetzt funktioniert die jQuery "fadeIn ()".

Der Grund, warum ich dies im Gegensatz zu den obigen Vorschlägen getan habe, ist, dass wenn Sie "removeClass ('. Hide')" das Objekt sofort anzeigen und die Animation überspringen :)

Hoffe es hat anderen geholfen.

0
Ricky Levi

Basierend auf den obigen Antworten habe ich gerade meine eigenen Funktionen hinzugefügt und dies widerspricht nicht den verfügbaren jquery-Funktionen wie .hide (), .show (), .toggle (). Ich hoffe es hilft.

    /*
     * .hideElement()
     * Hide the matched elements. 
     */
    $.fn.hideElement = function(){
        $(this).addClass('hidden');
        return this;
    };

    /*
     * .showElement()
     * Show the matched elements.
     */
    $.fn.showElement = function(){
        $(this).removeClass('hidden');
        return this;
    };

    /*
     * .toggleElement()
     * Toggle the matched elements.
     */
    $.fn.toggleElement = function(){
        $(this).toggleClass('hidden');
        return this;
    };
0
Sagar Gala