Angenommen, ich erstelle ein solches HTML-Element.

<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 dieser).

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

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

Die richtige Antwort

Bootstrap 4.x.

Bootstrap 4.x verwendet die neue .d-noneKlasse . Anstatt entweder .hidden oder .hidewenn Sie Bootstrap 4.x verwenden, verwenden Sie .d-none.

<div id="myId" class="d-none">Foobar</div>

• Um es zu zeigen: $("#myId").removeClass('d-none');
• Um es zu verbergen: $("#myId").addClass('d-none');
• Um es umzuschalten: $("#myId").toggleClass('d-none');

(danke an den Kommentar von Fangming)

Bootstrap 3.x.

Erstens nicht verwenden .hide! Verwenden Sie .hidden. Wie andere gesagt haben, .hideist veraltet,

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

Verwenden Sie zweitens .toggleClass () , .addClass () und .removeClass () von jQuery.

<div id="myId" class="hidden">Foobar</div>

• Um es zu zeigen: $("#myId").removeClass('hidden');
• Um es zu verbergen: $("#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, hiddenund invisiblesind in dem docs .

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

Einfach:

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

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

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

Verwenden Sie Bootstrap .collapse anstelle von .hidden

Später in JQuery können Sie .show () oder .hide () verwenden, um es zu bearbeiten

Diese Lösung ist veraltet. Verwenden Sie die am besten gewählte Lösung.

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

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

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

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

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

.hideMe {
    display: none;
}

und wie folgt verwendet:

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

und jetzt funktioniert das Verstecken von jQuery

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

Die beschriebene Methode @ Dustin-Graham ist, wie ich es auch mache. Denken Sie auch daran, dass Bootstrap 3 jetzt "versteckt" anstelle von "verstecken" verwendet, wie in der Dokumentation bei getbootstrap beschrieben . Also würde ich so etwas machen:

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

Wenn Sie dann jQuery show()und hide()Methoden verwenden, tritt kein Konflikt auf.

Initiieren Sie das Element als solches:

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

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

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

Der einfachste Weg, glaube ich.

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();
});

Ich benutze gerne die toggleClass:

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

$(function(){

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

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

})

// Sie müssen nicht einmal das #my-div .hideNor einstellen, sondern !importantnur den Umschalter in der Ereignisfunktion einfügen / wiederholen.

Dies ist kürzlich beim Upgrade von 2.3 auf 3.1 aufgetreten. unsere jQuery Animationen ( slidedown ) brach , weil wir setzen wurden ausblenden auf die Elemente in der Seitenvorlage. Wir sind den Weg gegangen, namengebundene Versionen von Bootstrap-Klassen zu erstellen, die jetzt die hässliche ! Wichtige Regel enthalten.

.rb-hide { display: none; }
.rb-pull-left { float: left; }
etc...

Razz 'Antwort ist gut, wenn Sie bereit sind, das, was Sie getan haben, neu zu schreiben.

War in den gleichen Schwierigkeiten und arbeitete es mit folgendem aus:

/**
 * 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);

Werfen Sie es weg, wenn Bootstrap eine Lösung für dieses Problem enthält.

In Bootstrap 4 können Sie mit d-noneclass ein Element vollständig ausblenden. https://getbootstrap.com/docs/4.0/utilities/display/

Update : Von nun an benutze ich .collapseund $('.collapse').show().

Für Bootstrap 4 Alpha 6

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

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. Beispielsweise verbirgt .hidden-md-up ein Element in mittleren, großen und extragroßen Ansichtsfenstern.

Es gibt auch ein hiddenHTML5-Attribut.

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

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

<input type="text" hidden>

Es gibt auch .invisibleAuswirkungen auf das Layout.

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

Mit der Klasse .invisible kann nur die Sichtbarkeit eines Elements umgeschaltet werden. Dies bedeutet, dass die Anzeige nicht geändert wird und das Element weiterhin den Fluss des Dokuments beeinflussen kann.

Ausblenden und Ausblenden sind veraltet und werden später entfernt. In neuen Versionen sind sie nicht mehr vorhanden. Sie können je nach Bedarf die Klassen d-none / d-sm-none / unsichtbar usw. verwenden. Der wahrscheinliche Grund, warum sie entfernt wurden, ist, dass das Verstecken im CSS-Kontext etwas verwirrend ist. In CSS wird das Ausblenden (Ausblenden) zur Sichtbarkeit und nicht zur Anzeige verwendet. Sichtbarkeit und Anzeige sind verschiedene Dinge.

Wenn Sie eine Klasse für die Sichtbarkeit benötigen: versteckt, benötigen Sie eine unsichtbare Klasse von Sichtbarkeitsdienstprogrammen.

Ü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/

Verwenden Sie das folgende Snippet für Bootstrap 4, das jQuery erweitert:

(function( $ ) {

    $.fn.hideShow = function( action ) {

        if ( action.toUpperCase() === "SHOW") {
            // show
            if(this.hasClass("d-none"))
            {
                this.removeClass("d-none");
            }

            this.addClass("d-block");

        }

        if ( action.toUpperCase() === "HIDE" ) {
            // hide
            if(this.hasClass("d-block"))
            {
                this.removeClass("d-block");
            }

            this.addClass("d-none");
      }

          return this;
    };

}( jQuery ));

1. Fügen Sie den obigen Code in eine Datei ein. Nehmen wir an, "myJqExt.js"

2. Fügen Sie die Datei ein, nachdem jQuery aufgenommen wurde.

3. Verwenden Sie es mit der Syntax

   $ (). hideShow ('hide');

   $ (). hideShow ('show');

Ich hoffe, ihr findet es hilfreich. :-)

Bootstrap, JQuery, Namespaces ... Was ist falsch an 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 KISS-konform 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

Basierend auf den obigen Antworten habe ich gerade meine eigenen Funktionen hinzugefügt und dies steht nicht im Widerspruch zu 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;
    };

Ich habe mein Problem durch Bearbeiten der Bootstrap-CSS-Datei gelöst. Siehe Dokument:

.ausblenden:

.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 also nicht mehr verwendet, befindet sich jedoch weiterhin in der Datei min.css. Also habe ich .hidden AS IS verlassen und einfach das "! wichtig" aus der ".hide" -Klasse entfernt (die sowieso veraltet sein soll). 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 Vergleich zu den obigen Vorschlägen getan habe, ist, dass beim "removeClass ('. Hide')" das Objekt sofort angezeigt wird und Sie die Animation überspringen :)

Ich hoffe es hat anderen geholfen.

☀️ Die richtige Antwort

In Bootstrap 4 verstecken Sie das Element:

<p id="insufficient-balance-warning" class="d-none alert alert-danger">Pay me</p>

🛑 Dann könnten Sie es buchstäblich zeigen mit:

if (pizzaFundsAreLow) {
  $('#insufficient-balance-warning').removeClass('d-none');
}

💓 Wenn Sie dies jedoch auf semantische Weise tun, indem Sie die Verantwortung von Bootstrap auf jQuery übertragen, können Sie andere jQuery-Feinheiten wie das Fading verwenden:

if (pizzaFundsAreLow) {
  $('#insufficient-balance-warning').hide().removeClass('d-none').fadeIn();
}

Twitter Bootstrap bietet Klassen zum Umschalten von Inhalten, siehe https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less .

Ich bin völlig neu in jQuery und nachdem ich ihre Dokumente gelesen hatte, kam ich zu einer anderen Lösung, um Twitter Bootstrap + jQuery zu kombinieren.

Erstens besteht die Lösung zum "Ausblenden" und "Anzeigen" eines Elements (Klasse wsis-Collapse) beim Klicken auf ein anderes Element (Klasse wsis-toggle) in der Verwendung von .toggle .

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle();
    });
});

Sie haben das Element bereits .wsis-collapsemithilfe der Twitter Bootstrap (V3) -Klasse ausgeblendet .hidden:

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

Wenn Sie auf klicken .wsis-toggle, fügt die jQuery einen Inline-Stil hinzu:

display: block

Aufgrund des !importantTwitter-Bootstraps hat dieser Inline-Stil keine Auswirkung, daher müssen wir die .hiddenKlasse entfernen , aber ich werde dies nicht empfehlen .removeClass! Denn wenn jQuery etwas wieder ausblendet, wird auch ein Inline-Stil hinzugefügt:

display: none

Dies ist nicht dasselbe wie die .hidden-Klasse von Twitter Bootstrap, die auch für AT (Screenreader) optimiert ist. Wenn wir also das versteckte Div zeigen wollen, müssen wir die .hiddenKlasse von Twitter Bootstrap loswerden, damit wir die wichtigen Anweisungen loswerden, aber wenn wir es wieder verstecken, wollen wir die .hiddenKlasse wieder haben! Wir können dafür [.toggleClass] [3] verwenden.

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle().toggleClass( "hidden" );
    });
});

Auf diese Weise verwenden Sie die versteckte Klasse jedes Mal, wenn der Inhalt ausgeblendet wird.

Die .showKlasse in TB entspricht tatsächlich dem Inline-Stil der jQuery 'display: block'. Aber wenn die .showKlasse irgendwann anders sein wird, fügen Sie einfach auch diese Klasse hinzu:

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle().toggleClass( "hidden show" );
    });
});