devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Show menu Hide menu

  • [Javascript] Ressources en ligne, bonnes pratiques
  • [Magento 2] Ressources en ligne
  • [Magento] Ressources en ligne
  • [WordPress] Ressources en ligne
  • Liens
  • Outils en ligne
  • Plan du site
  • Ressources vidéos en ligne
  • UX/UI Design, transformation digitale, stratégie digitale, webmarketing (secteur automobile)
  • Veille technique et technologique du développeur Front-End, les bonnes adresses
  • Workflow Front-end 2018
  • [Javascript] Ressources en ligne, bonnes pratiques
  • [Magento 2] Ressources en ligne
  • [Magento] Ressources en ligne
  • [WordPress] Ressources en ligne
  • Liens
  • Outils en ligne
  • Plan du site
  • Ressources vidéos en ligne
  • UX/UI Design, transformation digitale, stratégie digitale, webmarketing (secteur automobile)
  • Veille technique et technologique du développeur Front-End, les bonnes adresses
  • Workflow Front-end 2018
Submit

Articles récents

  • [Magento 2] Ajouter des polices Google Fonts
  • [Magento 2] Depuis un template PHTML, détecter si la page sur laquelle nous nous trouvons est la homepage, une page produit, une page catégorie
  • [CSS] Désactiver le scroll dans la page lorsqu’un élément en position absolue (de type Modale, Off-Canvas, …) est ouvert en sur-impression
  • [Magento 2] Créer un thème enfant du thème Blank, astuces et bonnes pratiques
  • [Magento 2] Mediaqueries LESS avec les mixins du core

Catégories

  • Accessibilité
  • Admin configuration scope
  • Adobe Audition
  • Angular
  • AngularJS
  • Bac à sable
  • Block template system
  • Bonnes pratiques
  • Brackets
  • Change cross commerce
  • CSS
  • Customization of template files
  • Customizing look and feel
  • Design fallback
  • Development workflow
  • Docker
  • Drupal 7
  • Ergonomie
  • Foundation 6
  • Git
  • Gulp
  • HTML
  • Hybris
  • Internationalization
  • Javascript
  • Javascript creation & Customization
  • jQuery
  • JSP
  • LESS
  • Linux
  • Locate files / directory structure
  • Machine virtuelle
  • Magento
  • Magento 2
  • Magento 2.x
  • MySQL
  • Performances
  • Photoshop
  • PHP
  • Popcorn
  • Préparation projet
  • Prestashop
  • RBS Change
  • RBS Cooking
  • Responsive Design
  • SASS
  • SPIP
  • SSH
  • Twitter Bootstrap
  • Ubuntu
  • Uncategorized
  • UX Design
  • Vectoriel
  • Virtualisation
  • Webdesign
  • Webmarketing
  • Wordpress
  • XML layout

Tags

array bootstrap bouton breakpoint Change checkbox click css docker dropdown Drupal 7 fonction formulaire Foundation Foundation 6 grille Gulp image input javascript jquery js layout LESS liste magento media-queries menu mixin npm php phtml radio requireJS responsive sass surcharge table tableau tabs template theme ubuntu widget xml

Archives

  • janvier 2021
  • décembre 2020
  • novembre 2020
  • octobre 2020
  • septembre 2020
  • août 2020
  • juillet 2020
  • juin 2020
  • mai 2020
  • avril 2020
  • mars 2020
  • février 2020
  • janvier 2020
  • décembre 2019
  • novembre 2019
  • octobre 2019
  • août 2019
  • juillet 2019
  • juin 2019
  • avril 2019
  • mars 2019
  • février 2019
  • janvier 2019
  • décembre 2018
  • novembre 2018
  • octobre 2018
  • septembre 2018
  • août 2018
  • juillet 2018
  • juin 2018
  • mai 2018
  • avril 2018
  • mars 2018
  • février 2018
  • janvier 2018
  • décembre 2017
  • novembre 2017
  • octobre 2017
  • septembre 2017
  • août 2017
  • juillet 2017
  • juin 2017
  • mai 2017
  • avril 2017
  • mars 2017
  • février 2017
  • janvier 2017
  • décembre 2016
  • novembre 2016
  • septembre 2016
  • août 2016
  • juillet 2016
  • juin 2016
  • mai 2016
  • avril 2016
  • mars 2016
  • février 2016
  • janvier 2016
  • décembre 2015
  • novembre 2015
  • octobre 2015
  • septembre 2015
  • août 2015
  • juillet 2015
  • juin 2015
  • avril 2015
  • mars 2015
  • février 2015
  • janvier 2015
  • décembre 2014
  • novembre 2014
  • octobre 2014
  • septembre 2014
  • août 2014
  • juillet 2014
  • juin 2014
  • mai 2014
  • avril 2014
  • mars 2014
  • février 2014
  • janvier 2014
  • novembre 2013
  • octobre 2013
  • septembre 2013
  • août 2013
  • juillet 2013
  • juin 2013
  • mai 2013
  • avril 2013
  • mars 2013
  • janvier 2013
  • décembre 2012
  • novembre 2012

Méta

  • Connexion
  • Flux des publications
  • Flux des commentaires
  • Site de WordPress-FR

[jQuery] Vérifier, au clic, la présence d’une classe dans le DOM et afficher ou masquer des éléments en fonction

16/09/2016 / admin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// Par défaut, on masque les éléments qui ne doivent être visibles que lorsque la classe "is-active" est présente dans le DOM
$('#showIfLinkIsActive').addClass('hidden');
 
// Fonction qui vérifie si la classe "is-active" est présente dans le DOM
function setElementVisibility(){
if($('.foo-element a.link').hasClass('is-active')){
$('#showIfLinkIsActive').removeClass('hidden');
}
else{
$('#showIfLinkIsActive').addClass('hidden');
}
}
 
// Au clic sur un lien, on lance la fonction ci-dessus (on attend 100ms que la classe ".is-active" fasse son apparition dans le DOM)
$('.foo-element a.link').on('click', function(){
setTimeout(setElementVisibility, 100);
});
 
// Au clic n'importe où dans le document (fermeture automatique du lien ouvert), on relance la fonction ci-dessus...
$(document).on('click', function(){
setTimeout(setElementVisibility, 100);
});
 
// ...mais le lien ouvert ne doit pas se fermer au clic sur ces éléments
var fooElements = $('.foo-element, .foo-element2, .foo-element3');
 
fooElements.on('click', function(e){
e.stopPropagation();
});

Categories: jQuery

Tags: condition, jquery, setTimeout

« Optimiser et synchroniser l’exécution de media queries CSS et JS avec Sync MQ [CSS] Changer la couleur et l’apparence des puces de l’élément UL »

© 2021 devfrontend.info

Theme by Anders Norén — Up ↑