jQuery Girl
  1. jQuery Girl
  3. Méthode de conception réactive pour la réduction d’une div
Intereting Posts
Fonction ne renvoyant pas de valeur à une autre fonction append des classes via javascript à chaque DIV sans écraser les classes existantes? Comment utiliser jQuery avec JSF 2.0 jQuery animer en transparent Enregistrer les options d’extension de chrome sur chrome.storage? Changer les données avant de soumettre Comment obtenir un élément sous le curseur de la souris en faisant glisser un autre élément? jQuery Mobile: comment effectuer la transition de page après le chargement complet de la page dans DOM validation de rsv par Benjamin Keen propre fonction ne fonctionne pas correctement? sur le survol de lien afficher div lorsque le curseur quitte forme div et lien masquer div jquery Filtres SVG après clonage SVG Basculer la classe active dans la barre de navigation avec JQuery pourquoi Ajax get Request a échoué Certificat client SSL non chargé lors d’un appel ajax depuis Firefox jQuery Problème jScrollPane / conflit avec Google Maps sur Safari

Méthode de conception réactive pour la réduction d’une div

J’utilise un thème CSS avec un menu de navigation dans la barre latérale. J’aimerais append un bouton pour permettre aux utilisateurs de fermer la barre latérale.

Je suis familier avec jQuery bascule, affiche, cache, etc … et je pourrais écrire le script pour masquer et afficher la div de plusieurs façons, mais existe-t-il un moyen conforme de le faire qui fonctionne sur la plupart des navigateurs et Téléphones?

Existe-t-il une meilleure option que d’afficher masquer dans jQuery?

Merci

Le moyen le plus approprié serait simplement de basculer d’une classe à l’autre avec des CSS … 

var $yourSidebar = $(".sidebar"); $(document).on("click.toggleNav touch.toggleNav", ".yourTriggerButton", function(){ $yourSidebar.toggleClass("open"); });

Dans vos CSS, vous pouvez utiliser des requêtes multimédia pour que la navigation se comporte différemment pour chaque plage de résolution et même pour animer correctement à l’aide de transitions CSS.

Cela fonctionnera sur presque tous les appareils mobiles et de bureau.

DMEO: http://jsfiddle.net/a24fQ/

Vous pouvez utiliser l’atsortingbut CSS visibilité et rendre la visibilité: masqué sur l’événement de clic. comme jQuery (selector).css('visibility','hidden');

utilisez ceci en classe … 

 div { display:none; } div:hover { display:block; }

Je pense qu’il n’existe pas de meilleur moyen d’utiliser JS. Parce que vous devez gérer le basculement en cliquant sur un bouton. Utiliser jQuery, ExtJS, ou straight JS est une question d’utilisation d’outil. Donc, utiliser du code JavaScript est tout à fait normal dans ce cas.