Comment masquer un élément avec Twitter Bootstrap et le montrer avec jQuery?
Disons que je crée un élément HTML comme celui-ci,
<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>
Comment pourrais-je afficher et masquer cet élément HTML de jQuery/Javascript.
JavaScript:
$(function(){
$("#my-div").show();
});
Résultat: (avec aucun de ceux-ci).
J'aimerais que les éléments ci-dessus soient cachés.
Quel est le moyen le plus simple de masquer un élément à l'aide de Bootstrap et de l'afficher à l'aide de jQuery?
La bonne réponse
Bootstrap 4.x
Bootstrap 4.x utilise la nouvelle classe .d-none _ . Au lieu d'utiliser , soit .hidden, soit .hide si vous utilisez Bootstrap 4 .x utilise .d-none.
<div id="myId" class="d-none">Foobar</div>
- Pour le montrer:
$("#myId").removeClass('d-none'); - Pour le cacher:
$("#myId").addClass('d-none'); - Pour le basculer:
$("#myId").toggleClass('d-none');
(merci au commentaire de Fangming)
Bootstrap 3.x
Tout d'abord, n'utilisez pas .hide! Utilisez .hidden. Comme d'autres l'ont déjà dit, .hide est obsolète,
.hide est disponible, mais n’affecte pas toujours les lecteurs d’écran et est obsolète à partir de v3.0.1
Deuxièmement, utilisez jQuery . ToggleClass () , . AddClass () et . RemoveClass ()
<div id="myId" class="hidden">Foobar</div>
- Pour le montrer:
$("#myId").removeClass('hidden'); - Pour le cacher:
$("#myId").addClass('hidden'); - Pour le basculer:
$("#myId").toggleClass('hidden');
N'utilisez pas la classe css .show, elle a un très petit cas d'utilisation. Les définitions de show, hidden et invisible figurent dans le docs .
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
.invisible {
visibility: hidden;
}
Simplement:
$(function(){
$("#my-div").removeClass('hide');
});
Ou si vous voulez que la classe soit toujours là:
$(function(){
$("#my-div").css('display', 'block !important');
});
La classe hide est utile pour garder le contenu masqué lors du chargement de la page.
Ma solution à cela est lors de l'initialisation, basculez vers la cache de jquery:
$('.targets').hide().removeClass('hide');
Ensuite, show() et hide() devraient fonctionner normalement.
Utilisez bootstrap .collapse au lieu de .hidden
Plus tard dans JQuery, vous pouvez utiliser .show () ou .hide () pour le manipuler
Une autre façon de remédier à cet inconvénient est de créer votre propre classe CSS qui ne définit pas le! Important à la fin de la règle, comme ceci:
.hideMe {
display: none;
}
et utilisé comme tel:
<div id="header-mask" class="hideMe"></div>
et maintenant jQuery cache des œuvres
$('#header-mask').show();
La méthode décrite par @ dustin-graham montre comment je le fais aussi. Rappelez-vous également que bootstrap 3 utilise maintenant "masqué" au lieu de "masquer" conformément à la documentation de getbootstrap . Donc je ferais quelque chose comme ça:
$(document).ready(function() {
$('.hide').hide().removeClass('hide');
$('.hidden').hide().removeClass('hidden');
});
Ensuite, chaque fois que vous utilisez les méthodes jQuery show() et hide(), il n'y aura pas de conflit.
Initier l'élément avec en tant que tel:
<div id='foo' style="display: none"></div>
Et puis, utilisez l'événement que vous voulez montrer, en tant que tel:
$('#foo').show();
Le moyen le plus simple d'y aller, je crois.
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();
});
La réponse de Razz est bonne si vous êtes prêt à réécrire ce que vous avez fait.
Était dans le même problème et a travaillé avec ce qui suit:
/**
* 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);Jetez-le quand Bootstrap vient avec un correctif pour ce problème.
Dans bootstrap 4, vous pouvez utiliser la classe d-none pour masquer complètement un élément. https://getbootstrap.com/docs/4.0/utilities/display/
Récemment rencontré dans cela lors de la mise à niveau de 2.3 à 3.1; nos animations jQuery (slideDown) ont été interrompues car nous mettions masquer sur les éléments du modèle de page. Nous avons choisi de créer des versions espacées de noms de Bootstrap classes portant désormais la règle laide ! Important .
.rb-hide { display: none; }
.rb-pull-left { float: left; }
etc...
$(function(){
$("#my-div").toggle();
$("#my-div").click(function(){$("#my-div").toggle()})
})
// vous n'avez même pas besoin de définir le #my-div.hide ni !important, il vous suffit de coller/répéter le basculement dans la fonction d'événement.
J'aime utiliser le toggleClass:
var switch = true; //it can be an JSON value ...
$("#my-div").toggleClass('hide', switch);
Pour Bootstrap 4 Alpha 6
Pour Bootstrap 4, vous devez utiliser .hidden-xs-up.
https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes
Les classes .hidden - * - up cachent l'élément lorsque la fenêtre d'affichage est au point d'arrêt donné ou plus large. Par exemple, .hidden-md-up masque un élément dans les fenêtres de taille moyenne, grande et très grande.
Il existe également l'attribut hidden HTML5.
https://v4-alpha.getbootstrap.com/content/reboot/#html5-hidden-attribute
HTML5 ajoute un nouvel attribut global nommé [caché], qui a pour style display: none par défaut. En empruntant une idée de PureCSS, nous améliorons cette valeur par défaut en rendant [hidden] {display: none! Important; } pour éviter que son affichage ne soit remplacé accidentellement. Bien que [hidden] ne soit pas supporté nativement par IE10, la déclaration explicite dans notre CSS résout ce problème.
<input type="text" hidden>
Il y a aussi .invisible qui affecte la mise en page.
https://v4-alpha.getbootstrap.com/utilities/invisible-content/
La classe .invisible peut être utilisée pour basculer uniquement la visibilité d'un élément, ce qui signifie que son affichage n'est pas modifié et que l'élément peut toujours affecter le déroulement du document.
hide et hidden sont tous deux obsolètes et supprimés par la suite. Ils n'existent plus dans les nouvelles versions. Vous pouvez utiliser les classes d-none/d-sm-none/invisible, etc. selon vos besoins. La raison probable pour laquelle ils ont été supprimés est que hidden/hide est un peu déroutant dans le contexte CSS. En CSS, masquer (masqué) est utilisé pour la visibilité, pas pour l'affichage. la visibilité et l'affichage sont des choses différentes.
Si vous avez besoin d'une classe pour la visibilité: hidden, vous avez besoin d'une classe invisible à partir des utilitaires de visibilité.
Vérifiez ci-dessous les utilitaires de visibilité et d'affichage:
Bootstrap, JQuery, namespaces ... Qu'est-ce qui ne va pas avec un simple:
var x = document.getElementById('my-div');
x.className.replace(/\bhide\b/, ''); //remove any hide class
x.style.display = ''; //show
x.style.display = 'none'; //hide
Vous pouvez créer une petite fonction d'assistance, conforme à 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
J'ai résolu mon problème en modifiant le fichier CSS Bootstrap CSS, voir leur doc:
.cacher:
.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1
.hide {
display: none !important;
}
.hidden est ce que nous sommes supposés utiliser maintenant, mais c’est en fait:
.hidden {
display: none !important;
visibility: hidden !important;
}
Le "fadeIn" de jQuery ne fonctionnera pas à cause de la "visibilité".
Ainsi, pour le dernier Bootstrap, .hide n’est plus utilisé, mais reste dans le fichier min.css. donc je suis parti .hidden AS IS et je viens de retirer le "! important" de la classe ".hide" (qui est supposée être déconseillée de toute façon). mais vous pouvez aussi simplement le remplacer dans votre propre CSS, je voulais juste que toutes mes applications agissent de la même façon, alors j'ai changé le fichier CSS Bootstrap.
Et maintenant, le jQuery "fadeIn ()" fonctionne.
La raison pour laquelle j’ai fait cela par rapport aux suggestions ci-dessus, c’est que, lorsque vous "supprimezClass ('. Hide") ", l’objet immédiatement affiché et vous ignorez l’animation :)
J'espère que ça a aidé les autres.
Sur la base des réponses ci-dessus, je viens d’ajouter mes propres fonctions, ce qui n’empêche pas les fonctions jquery disponibles, telles que .hide (), .show (), .toggle (). J'espère que ça aide.
/*
* .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;
};