Eu tenho um problema com uma barra lateral alternância usando jQuery

Question

Eu estou tentando criar uma alternância simples barra lateral usando jquery, onde se expande e se contrai quando um botão é pressionado. O botão também muda para outro tipo de botão, quando pressionado. A barra lateral irá expandir, mas por alguma razão, ele não vai voltar para a sua posição original. Você pode ver uma cópia do JavaScript e HTML em http: //www.jqueryhelp .com / viewtopic.php? p = 4241 # 4241

Aqui está o código de trabalho, graças 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

tentar em vez de uso correto deixado com um número negativo. Além disso, eu recomendo usar preventDefault ao invés de retornar falsa.

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

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

Atualização

Outra peça i só notei é que seu anexando um evento de clique com o botão .active, quando o documento está pronto, mas não existe um botão .active quando o documento está pronto que vem em depois de alterá-lo. Existem algumas opções aqui.

Primeiro é usar a nova recurso ao vivo do 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");
}); 

A outra opção seria a de ter definido o evento click em um modificador diferente (por exemplo. Na id, talvez).

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

, em seguida, usar isso para lidar com o clique

$("#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 ainda mais concisa

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

A última opção que eu posso imaginar seria para definir os eventos de clique depois de alterá-los, mas eu não faria isso, então eu não estou indo para fornecer uma amostra.

Por último, gostaria de colocar em alerta em seu retorno de chamada ativa e se certificar de que seu evento botão ativo é realmente disparar.

Answer 2

A forma como a sua lógica está escrito, eu acho que você precisa fazer um 'toggleClass' em ambas as classes dentro de seus manipuladores de clique que vai acrescentar um, e retire o outro. Por exemplo, quando o item "ativo" é clicado você alternar (add) a classe btn-slide, mas isso vai deixar a classe "ativo" no lugar também.

É claro que em vez de usar "toggleClass" você poderia também usar "addClass" e "removeClass" para ser mais explícito.

Eu recomendo usar uma ferramenta como o Firebug para ver o que está acontecendo dentro do seu 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

Isso funciona.

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

Answer 4

O HTML

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

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

O CSS

#main { height:200px; }

Explicação

OK eu escolhi para fazer isso um pouco diferente. Isso inicializa com a altura do nosso experimento sendo 200px ea largura é automática. Quando você clica no hyperlink o experimento está escondido em 1,3 segundos e um interruptor é definido como 0. quando você clicar novamente ele volta ao longo de um período de 1,3 segundos eo interruptor recebe de volta o valor 1. como um interruptor de luz. Eu usei o animado aqui porque um fade simples ou esconder ficou me entediado ...

A razão pela qual eu tenho as larguras e alturas do elemento antes de zero-ing-los foi se disse width: 100%" e hieght: '100%' no meu animado seria configurá-lo para 100% das páginas de largura e altura ... nós não queremos isso.

NOTA: Também estou usando a opacidade ao longo de um período de tempo. bastante agradável para desaparecendo assim:)