Załóżmy, że tworzę taki element HTML,

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

Jak mogę pokazać i ukryć ten element HTML przed jQuery / Javascript.

JavaScript:

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

Wynik: (z dowolnym z nich).

Chciałbym, aby powyższe elementy były ukryte.

Jaki jest najprostszy sposób na ukrycie elementu za pomocą Bootstrap i pokazanie go za pomocą jQuery?

Prawidłowa odpowiedź

Bootstrap 4.x

Bootstrap 4.x używa nowej .d-noneklasy . Zamiast używać jednego z nich.hidden lub .hidejeśli używasz Bootstrap 4.x, użyj .d-none.

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

• Aby to pokazać: $("#myId").removeClass('d-none');
• Aby to ukryć: $("#myId").addClass('d-none');
• Aby przełączyć: $("#myId").toggleClass('d-none');

(dzięki komentarzowi Fangminga)

Bootstrap 3.x

Po pierwsze, nie używaj .hide! Zastosowanie .hidden. Jak powiedzieli inni, .hidejest przestarzałe,

.hide jest dostępne, ale nie zawsze wpływa na czytniki ekranu i jest przestarzałe od wersji 3.0.1

Po drugie, użyj .toggleClass () , .addClass () i .removeClass jQuery'ego

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

• Aby to pokazać: $("#myId").removeClass('hidden');
• Aby to ukryć: $("#myId").addClass('hidden');
• Aby przełączyć: $("#myId").toggleClass('hidden');

Nie używaj klasy css .show, ma ona bardzo mały przypadek użycia. Definicje show, hiddeni invisiblesą w docs .

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

Po prostu:

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

Lub jeśli chcesz, aby klasa nadal tam była:

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

Użyj bootstrap .collapse zamiast .hidden

Później w JQuery możesz użyć .show () lub .hide () do manipulowania nim

To rozwiązanie jest przestarzałe. Skorzystaj z najlepiej głosowanego rozwiązania.

hideKlasa jest przydatna, aby utrzymać zawartość ukryty na stronie obciążenia.

Moim rozwiązaniem jest to podczas inicjalizacji, przejdź do hide jquery's:

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

Wtedy show()i hide()powinien działać normalnie.

Innym sposobem zaradzenia tej irytacji jest utworzenie własnej klasy CSS, która nie ustawia! Ważnego na końcu reguły, na przykład:

.hideMe {
    display: none;
}

i używane w ten sposób:

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

a teraz działa ukrywanie jQuery

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

Przedstawiona metoda @ dustin-graham jest taka, jak ja to robię. Pamiętaj również, że bootstrap 3 używa teraz „ukryty” zamiast „ukryć”, zgodnie z ich dokumentacją w getbootstrap . Zrobiłbym więc coś takiego:

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

Za każdym razem, gdy użyjesz jQuery show()i hide()metod, nie będzie konfliktu.

Zainicjuj element za pomocą:

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

A następnie użyj zdarzenia, które chcesz pokazać, jako takie:

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

Uważam, że to najprostsza droga.

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

Lubię używać 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()})

})

// nie musisz nawet ustawiać #my-div .hidenor !important, wystarczy wkleić / powtórzyć przełącznik w funkcji zdarzenia.

Ostatnio natknąłem się na to podczas aktualizacji z 2.3 do 3.1; nasze animacje jQuery ( slideDown ) zepsuły się, ponieważ ukrywaliśmy elementy w szablonie strony. Poszliśmy drogą tworzenia rozstawionych w nazwach wersji klas Bootstrap, które teraz noszą brzydką ! Ważną zasadę.

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

Odpowiedź Razza jest dobra, jeśli chcesz przepisać to, co zrobiłeś.

Miał ten sam problem i opracował następujące rozwiązania:

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

Wyrzuć go, gdy Bootstrap zawiera naprawę tego problemu.

W bootstrap 4 możesz użyć d-noneklasy, aby całkowicie ukryć element. https://getbootstrap.com/docs/4.0/utilities/display/

Aktualizacja : Od teraz używam .collapsei $('.collapse').show().

Dla Bootstrap 4 Alpha 6

W przypadku Bootstrap 4 musisz użyć .hidden-xs-up.

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

Klasy .hidden - *-up ukrywają element, gdy rzutnia znajduje się w danym punkcie przerwania lub w szerszym zakresie. Na przykład .hidden-md-up ukrywa element w średnich, dużych i bardzo dużych rzutniach.

Istnieje również hiddenatrybut HTML5.

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

HTML5 dodaje nowy globalny atrybut o nazwie [ukryty], który ma styl wyświetlania: domyślnie brak. Pożyczając pomysł z PureCSS, ulepszamy to ustawienie domyślne, czyniąc [ukryty] {display: none! Ważne; }, aby zapobiec przypadkowemu zastąpieniu wyświetlania. Chociaż [ukryty] nie jest natywnie obsługiwany przez IE10, wyraźna deklaracja w naszym CSS omija ten problem.

<input type="text" hidden>

Istnieje również to, .invisibleco wpływa na układ.

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

Klasy .invisible można używać do przełączania tylko widoczności elementu, co oznacza, że ​​jego wyświetlanie nie jest modyfikowane, a element może nadal wpływać na przepływ dokumentu.

Ukryj i ukryte są zarówno przestarzałe, jak i później usunięte, nie istnieją już w nowych wersjach. W zależności od potrzeb możesz użyć klas d-none / d-sm-none / invisible itp. Prawdopodobnym powodem ich usunięcia jest to, że ukrywanie / ukrywanie jest nieco mylące w kontekście CSS. W CSS ukrywanie (ukrywanie) służy do widoczności, a nie do wyświetlania. widoczność i wyświetlanie to różne rzeczy.

Jeśli potrzebujesz klasy widoczności: ukryta, potrzebujesz niewidocznej klasy z narzędzi widoczności.

Sprawdź poniżej zarówno widoczność, jak i narzędzia wyświetlania:

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

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

Użyj następującego fragmentu kodu w przypadku Bootstrap 4, który rozszerza jQuery:

(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. Umieść powyższy kod w pliku. Załóżmy, że „myJqExt.js”

2. Dołącz plik po dołączeniu jQuery.

3. Użyj go, używając składni

   $ (). hideShow ('hide');

   $ (). hideShow ('show');

mam nadzieję, że uznasz to za pomocne. :-)

Bootstrap, JQuery, przestrzenie nazw ... Co jest nie tak z prostym:

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

Możesz stworzyć małą funkcję pomocniczą, zgodną z KISS:

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

W oparciu o powyższe odpowiedzi właśnie dodałem własne funkcje, co nie koliduje z dostępnymi funkcjami jquery, takimi jak .hide (), .show (), .toggle (). Mam nadzieję, że to pomoże.

    /*
     * .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;
    };

Rozwiązałem problem, edytując plik CSS Bootstrap, zobacz ich dokument:

.ukryć:

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

.hide {
  display: none !important;
}

.hidden jest tym, czego powinniśmy używać teraz, ale tak naprawdę:

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

„FadeIn” jQuery nie będzie działać z powodu „widoczności”.

Tak więc w najnowszym Bootstrapie .hide nie jest już używany, ale nadal znajduje się w pliku min.css. więc opuściłem .hidden AS IS i po prostu usunąłem „! important” z klasy „.hide” (która i tak powinna być przestarzała). ale możesz też zastąpić go w swoim własnym CSS, chciałem tylko, aby cała moja aplikacja działała tak samo, więc zmieniłem plik CSS Bootstrap.

A teraz działa jQuery „fadeIn ()”.

Powodem, dla którego to zrobiłem w porównaniu z powyższymi sugestiami, jest to, że kiedy „removeClass („. Hide ”)” obiekt jest natychmiast wyświetlany, a ty pomijasz animację :)

Mam nadzieję, że pomogło to innym.

☀️ Jaśniejsza odpowiedź

W Bootstrap 4 ukrywasz element:

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

🛑 Oczywiście możesz to dosłownie pokazać za pomocą:

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

💓 Ale jeśli zrobisz to semantycznie, przenosząc odpowiedzialność z Bootstrap na jQuery, możesz użyć innych subtelności jQuery, takich jak zanikanie:

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

Twitter Bootstrap zapewnia klasy do przełączania treści, patrz https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less .

Jestem zupełnie nowy w jQuery, a po przeczytaniu ich dokumentacji znalazłem inne rozwiązanie, aby połączyć Twitter Bootstrap + jQuery.

Po pierwsze, rozwiązaniem „ukrywania” i „pokazywania” elementu (klasa wsis-collapse) po kliknięciu innego elementu (klasa wsis-toggle) jest użycie .toggle .

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

Element .wsis-collapsezostał już ukryty za pomocą klasy Twitter Bootstrap (V3) .hiddenrównież:

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

Po kliknięciu .wsis-togglejQuery dodaje styl wbudowany:

display: block

Ze względu na !importantTwitter Bootstrap ten wbudowany styl nie ma żadnego efektu, więc musimy usunąć .hiddenklasę, ale nie polecam .removeClasstego! Ponieważ gdy jQuery znowu coś ukryje, dodaje również styl wbudowany:

display: none

To nie to samo co .hidden klasa Twitter Bootstrap, który jest zoptymalizowany również dla AT (czytników ekranu). Tak więc, jeśli chcemy pokazać ukryty div, musimy pozbyć się .hiddenklasy Bootstrap na Twitterze, więc pozbywamy się ważnych instrukcji, ale jeśli ponownie to ukryjemy, chcemy .hiddenponownie odzyskać klasę! Możemy do tego użyć [.toggleClass] [3].

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

W ten sposób używasz ukrytej klasy za każdym razem, gdy treść jest ukryta.

.showKlasa w TB jest właściwie taka sama jak styl wbudowany w jQuery, zarówno 'display: block'. Ale jeśli .showklasa w którymś momencie będzie inna, po prostu dodaj również tę klasę:

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