jQuery Girl
  1. jQuery Girl
  3. Le curseur du panneau jQuery s’ouvre en cliquant sur le bouton mais ne ferme pas
Intereting Posts
Comment recréer un dialog jQuery après détruire Je souhaite append une ligne à chaque colonne d’un graphique à colonnes Highcharts Comment trouver l’index d’une ligne dans une table en utilisant jquery pourquoi le bouton du bouton Précédent ne s’affiche-t-il pas sur le deuxième écran? jQuery plugin imagemapster ne fait rien Requêtes de firebase database javascript Rails Modifier un fichier svg avec jQuery Convertir une liste séparée par des virgules en JSON en utilisant Javascript Javascript tronquant la chaîne lors de la concaténation Est-il possible d’obtenir des informations d’un fichier côté client sans télécharger le fichier? Image de fond plein écran jQuery CSS – Quelqu’un peut-il m’aider à comprendre où je me suis trompé avec la navigation dans mon menu déroulant? Jquery passe des données à la fonction ajax Comment passer un contexte d’object au rappel JSONP jQuery.ajax? Recharger la page lorsque la fenêtre dépasse certaines largeurs

Le curseur du panneau jQuery s’ouvre en cliquant sur le bouton mais ne ferme pas

J’ai un bouton sur ma page qui ouvre un panneau de droite en utilisant les frameworks jquery et modernizr. Le bouton est placé à l’endroit le plus à droite de l’écran. Quand il est cliqué il glisse vers la gauche avec le panneau qu’il ouvre. Le problème, c’est qu’il ne reviendra pas à l’endroit où il a été cliqué à nouveau.

HTML: 

 
 
 
Views
 Close 
 
 Views 
 
 Panel elements

Javascript: 

 jQuery(document).ready(function($){ //open the lateral panel $('.cd-btn').on('click', function(event){ event.preventDefault(); $('.cd-panel').addClass('is-visible'); }); //clode the lateral panel $('.cd-panel').on('click', function(event){ if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) { $('.cd-panel').removeClass('is-visible'); event.preventDefault(); } }); });

Démo JsFiddle (Vous pouvez voir le CSS sur JSFiddle) 

 jQuery(document).ready(function($){ //open the lateral panel $('.cd-btn').on('click', function(event){ event.preventDefault(); //use toggleClass $('.cd-panel').toggleClass('is-visible'); }); });

JSFIDDLE http://jsfiddle.net/Lecgrfvu/3/

Essayez ceci avec toggleClass (Affichage en mode plein écran pour voir le résultat) 

 jQuery(document).ready(function ($) { //open the lateral panel $('.cd-btn').on('click', function (event) { event.preventDefault(); $('.cd-panel').toggleClass('is-visible'); }); //clode the lateral panel }); 
 .cd-panel-close { position: absolute; top: 0; right: 0; height: 100%; width: 60px; /* image replacement */ display: inline-block; overflow: hidden; text-indent: 100%; white-space: nowrap; } .cd-panel-close::before, .cd-panel-close::after { /* close icon created in CSS */ position: absolute; top: 22px; left: 20px; height: 3px; width: 20px; background-color: #424f5c; /* this fixes a bug where pseudo elements are slighty off position */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cd-panel-close::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .cd-panel-close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .no-touch .cd-panel-close:hover { background-color: #424f5c; } .no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after { background-color: #ffffff; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } .no-touch .cd-panel-close:hover::before { -webkit-transform: rotate(220deg); -moz-transform: rotate(220deg); -ms-transform: rotate(220deg); -o-transform: rotate(220deg); transform: rotate(220deg); } .no-touch .cd-panel-close:hover::after { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .cd-panel-container { position: fixed; width: 90%; height: 100%; top: 0; background: #dbe2e9; z-index: 1; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; } .from-right .cd-panel-container { right: 0; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .from-left .cd-panel-container { left: 0; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .is-visible .cd-panel-container { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } @media only screen and (min-width: 768px) { .cd-panel-container { width: 70%; } } @media only screen and (min-width: 1170px) { .cd-panel-container { width: 20%; } } .cd-panel-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 70px 5%; overflow: auto; /* smooth scrolling on touch devices */ -webkit-overflow-scrolling: touch; } .cd-panel-content p { font-size: 14px; font-size: 0.875rem; color: #424f5c; line-height: 1.4; margin: 2em 0; } .cd-panel-content p:first-of-type { margin-top: 0; } @media only screen and (min-width: 768px) { .cd-panel-content p { font-size: 16px; font-size: 1rem; line-height: 1.6; } } .cd-btn { visibility: visible !important; position: absolute; top: 400px; left: -50px; font-size: 16px; padding: 10px; margin: 0 0 !important; } 
  
 
 
Views
 Close 
 
 Views