Ho un problema con una barra laterale commutazione utilizzando jQuery

Question

Sto cercando di creare un semplice barra laterale commutazione utilizzando jQuery, dove si espande e si contrae quando viene premuto un tasto. Il pulsante cambia anche ad un altro tipo di pulsante quando premuto. La barra laterale si espanderà, ma per qualche ragione, non si sposterà indietro alla sua posizione originale. Potete vedere una copia dei JavaScript e HTML a http: //www.jqueryhelp .com / viewtopic.php? p = 4241 # 4241

Ecco il codice di lavoro, grazie 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

provare, invece di utilizzare destra sinistra con un numero negativo. Inoltre mi consiglia di utilizzare preventDefault invece di tornare falso.

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

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

Aggiornamento

Un altro pezzo Ho appena notato è che il vostro collegamento di un evento click al pulsante .active, quando il documento è pronto, ma non esiste un pulsante .active quando il documento è pronto che viene dopo la si modifica. Ci sono un paio di opzioni qui.

Per prima cosa è quello di utilizzare la nuova vivere funzione di 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'altra opzione sarebbe quella di aver impostato l'evento click su un modificatore diverso (ad es. Sul id, forse).

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

quindi utilizzare questo per gestire il 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');  
}); 

o anche più conciso

$("#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');  
}); 

L'ultima opzione che mi viene in mente sarebbe quello di impostare gli eventi click dopo averle cambiate, ma io non l'avrebbe fatto, quindi non ho intenzione di fornire un campione.

Infine, vorrei mettere in allerta nella vostra richiamata attiva e assicurarsi che il vostro evento tasto attiva è effettivamente sparando.

Answer 2

Il modo in cui la logica è scritto, penso che hai bisogno di fare un 'toggleClass' su entrambe le classi all'interno i gestori di click che aggiungerà uno e rimuovere l'altra. Ad esempio, quando il vostro articolo "attivo" si fa clic si alternare (aggiungere) la classe btn-scivolo, ma questo lascerà la classe "attiva" in posto troppo.

Naturalmente, invece di utilizzare "toggleClass" si potrebbe anche usare "addClass" e "removeClass" per essere più esplicito.

Mi consiglia di utilizzare uno strumento come Firebug per vedere cosa sta succedendo all'interno del vostro 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

Questo funziona.

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

Answer 4

Il codice HTML

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

La 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;
   }
 });
});

Il CSS

#main { height:200px; }

Spiegazione

OK ho scelto di fare questo un po 'diverso. questo inizializza con l'altezza del nostro esperimento essere 200px e la larghezza è automatico. Quando si fa clic sul collegamento ipertestuale l'esperimento è nascosto in 1,3 secondi e un interruttore è impostato su 0. quando si fa clic di nuovo si torna per un periodo di 1,3 secondi e l'interruttore viene riportato a 1. come un interruttore della luce. Ho usato l'animato qui perché una semplice dissolvenza o nascondere mi ha annoiato ...

Il motivo per cui ho ottenuto le larghezze e altezze dell'elemento prima di loro lo zero-zione è stata se detto width: 100%" e hieght: '100%' nel mio animata sarebbe impostarla al 100% delle pagine larghezza e altezza ... non vogliamo questo.

Nota: Sono anche utilizzando l'opacità nel corso di un periodo di tempo. molto bello per dissolvenza così:)