J'ai un problème avec une barre latérale à l'aide jQuery basculement

Question

Je suis en train de créer une barre latérale simple en utilisant jquery basculement, où il dilate et se contracte quand un bouton est pressé. Le bouton change également à un autre type de bouton lorsqu'il est pressé. La barre latérale se développera, mais pour une raison quelconque, il ne bougera pas revenir à sa position d'origine. Vous pouvez voir une copie du javascript et html http: //www.jqueryhelp .com / viewtopic.php? p = 4241 # 4241

Voici le code de travail, grâce Bendeway! : D

$(".btn-slide").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "show", left: 250}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
}); 

$(".active").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: 100}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
});

Answer 1

essayer au lieu d'utiliser à droite à gauche avec un nombre négatif. En outre, je vous conseille d'utiliser preventDefault au lieu de retourner faux.

$(".active").click(function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: -250}, "slow"); 
   $(this).toggleClass("btn-slide");
}); 

Mise à jour

Un autre morceau que je viens de remarquer est que votre événement la fixation d'un clic sur le bouton .active, lorsque le document est prêt, mais il n'y a pas de bouton .active lorsque le document est prêt qui vient après vous le changiez. Il y a quelques options ici.

La première est d'utiliser la nouvelle vivre caractéristique de jquery 1.3

$(".btn-slide").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: 250}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
}); 

$(".active").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: -250}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
}); 

L'autre option serait d'avoir mis l'événement cliquez sur un modificateur différent (par exemple. Sur l'id, peut-être).

<span>News  <img src="img/overlay.png" id="sliderButton" class="btn-slide" alt="" /></span>     

puis utilisez cette fonction pour gérer le clic

$("#sliderButton").click(function(e){ 
  e.preventDefault();

  $(this).is('.btn-slide').each(function() {
   $("#sidebar").animate({opacity: "show", left: 250}, "slow"); 
  });

  $(this).is('.active').each(function() {
   $("#sidebar").animate({opacity: "hide", left: -250}, "slow"); 
  });
  $(this).toggleClass("active").toggleClass('btn-slide');  
}); 

ou encore plus concise

$("#sliderButton").click(function(e){ 
  e.preventDefault();

  var animationSettings = {opacity: "show", left: 250};
  if ($(this).hasClass('active') )
  {
    animationSettings = {opacity: "hide", left: -250};
  } 

  $("#sidebar").animate(animationSettings , "slow"); 
  $(this).toggleClass("active").toggleClass('btn-slide');  
}); 

La dernière option que je peux penser serait de définir les événements de clic après que vous les changer, mais je ne ferais pas ça, donc je ne vais pas fournir un échantillon.

Enfin, je mettrais en alerte dans votre rappel actif et assurez-vous que votre événement touche active est mise à feu en fait.

Answer 2

La façon dont votre logique est écrit, je pense que vous devez faire un « toggleClass » sur les deux classes à l'intérieur de vos gestionnaires de clic qui ajoute une et retirez l'autre. Par exemple, lorsque votre élément « actif » est cliqué vous appuyez sur (ajouter) la classe BTN-slide, mais cela laissera la classe « active » en place aussi.

Bien sûr, au lieu d'utiliser « toggleClass » vous pouvez également utiliser « addClass » et « removeClass » d'être plus explicite.

Je recommande d'utiliser un outil comme Firebug pour regarder ce qui se passe dans votre DOM.

$(document).ready(function(){

   $(".btn-slide").click(function(){
   $("#sidebar").animate({opacity: "show", left: "250"}, "slow");
   $(this).toggleClass("active");  // add class
   $(this).toggleClass("btn-slide"); // remove class
   return false;
   });   

});

$(document).ready(function(){

   $(".active").click(function(){
   $("#sidebar").animate({opacity: "hide", right: "250"}, "slow");
   $(this).toggleClass("active");  // remove class
   $(this).toggleClass("btn-slide");  // add class
   return false;
   });
}); 

Answer 3

Cela fonctionne.

$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#sidebar").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});

Answer 4

Le code HTML

<div id="content">
 <a href="#" id="ec">Expand / Contract</a>
 <div id="main">
   Watch Me Shrink Or Grow
 </div>
</div>

Jquery

$(function() {
 var ecswitch = 1;
 /* prevent the annoying scroll back up thing */
 $("#ec").click(function(e) {
   e.preventDefault();
   var x = $("#main").width(); // get element width
   var y = $("#main").height(); // get element height 
   if(ecswitch == 1) {
    $("#main").animate({opacity:0, hieght:"0", width:"0"}, 1300);
    ecswitch = 0;
   } else {
     $("#main").animate({opacity:1, hieght:y, width:x}, 1300);
    ecswitch = 1;
   }
 });
});

Le CSS

#main { height:200px; }

Explication

OK j'ai choisi de faire un peu différemment. ce à la hauteur initialise de notre expérience étant 200px et la largeur est automatique. Lorsque vous cliquez sur le lien hypertexte l'expérience est cachée dans 1.3 secondes et un commutateur est réglé sur 0. lorsque vous cliquez à nouveau, il revient sur une période de 1,3 secondes et le commutateur se prépare à 1. comme un interrupteur. Je l'Animer ici parce qu'un fondu simple, ou cacher me ... s'ennuyaient

La raison pour laquelle je suis arrivé les largeurs et hauteurs de l'élément avant de les zéro-ment a été si ladite largeur: 100% » et hieght: « 100% » dans mon Animer il le mettre à 100% des pages largeur et hauteur ... nous ne voulons pas.

NOTE: J'utilise aussi l'opacité sur une période de temps. très agréable pour la décoloration aussi bien:)