jQuery Girl
  1. jQuery Girl
  3. Javascript (redimensionner lorsque la fenêtre du navigateur dépasse 436 pixels)
Intereting Posts
Comment obtenir une réponse jSON dans une variable à partir d’un script jQuery Comment mettre à jour le menu déroulant select2 dans codeigniter Le clavier virtuel Jquery Mobile 1.4.5 de l’appareil masque les entrées de formulaire en bas de la page. Comment puis-je complètement désactiver FullPage.js dans certaines conditions? fonction addclass / remove de classe retardée ne fonctionne pas Sélectionner un élément aléatoire Problème de propagation d’événement Obtenir la valeur param d’une URL dans jquery mobile Ouvrez un modal (dans Codeigniter) qui charge (dans une iframe) le contenu depuis une URL dépendant d’une variable php obtenir tous les éléments avec onclick en eux? Afficher le changement de contenu via le parent Mémorisation de la position de la palette d’outils déplaçable jQuery entre les actualisations de la page Impossible d’appeler la méthode servlet doPost à partir du formulaire JS L’événement de clic jQuery ne fonctionne pas dans les navigateurs mobiles Plugin de validation – Valider automatiquement plusieurs formulaires sur une page

Javascript (redimensionner lorsque la fenêtre du navigateur dépasse 436 pixels)

Je vais essayer d’expliquer en détail ce que je veux, car il est difficile d’expliquer comment je le souhaite. J’ai créé un site web responsive, où je veux montrer 3 boîtes:

(Jour 1 – Jour 2 – Jour 3)

Voir l’image que je veux regarder

Le problème (essayez ceci et vous verrez quel est mon problème:

  1. Redimensionnez la fenêtre de l’écran à moins de 436 pixels (pour obtenir les cases rouges)
  2. Cliquez ensuite sur le jour 2, qui ouvre ensuite le contenu du jour 2.
  3. Commencez à redimensionner le navigateur (ceci fermera alors automatiquement la case “Jour 2”. Je ne veux pas qu’elle se ferme lorsque je redimensionne.

La raison pour laquelle j’ai créé le redimensionnement, était pour le bureau, donc il développait toutes les cases vus sur le bureau.

MON CODE: 

$(document).ready(function() { if($(window).width()436) $('.bbottom, .bbottom2').show(); else $('.bbottom2').hide(); }); 
 .ticket{ margin:0; padding:0; float:left; } .btop2, .btop{ background-color:grey; color:white; padding:5px 10px; display:block; width:100px; border-bottom:1px solid; pointer-events:none; } .btop:hover{ background-color:darkgrey; } /*Responsive*/ @media screen and (max-width: 436px) { .ticket{ margin:0; padding:0; float:none; } .btop{ background-color:red; pointer-events:auto; } .btop:hover{ cursor:pointer; } } 
  
 
Day 1
 
Price 20
 
 
 
Day 2
 
Price 99
 
 
 
Day 3
 
Price 149

Ajoutez simplement $menuItem.toggleClass( "bbottom2" ); sur le bouton .btop et append également la classe bbottom à un autre ticket 

 $(document).ready(function() { if($(window).width()<436) $('.bbottom2').hide(); $('.btop').click(function(e) { e.preventDefault(); var $menuItem = $(this).next('.bbottom, .bbottom2'); $menuItem.slideToggle(); $menuItem.toggleClass( "bbottom2" ); }); }); $( window ).resize(function() { if($(window).width()>436) $('.bbottom, .bbottom2').show(); else $('.bbottom2').hide(); }); 
 .ticket{ margin:0; padding:0; float:left; } .btop2, .btop{ background-color:grey; color:white; padding:5px 10px; display:block; width:100px; border-bottom:1px solid; pointer-events:none; } .btop:hover{ background-color:darkgrey; } /*Responsive*/ @media screen and (max-width: 436px) { .ticket{ margin:0; padding:0; float:none; } .btop{ background-color:red; pointer-events:auto; } .btop:hover{ cursor:pointer; } } 
  
 
Day 1
 
Price 20
 
 
 
Day 2
 
Price 99
 
 
 
Day 3
 
Price 149