У меня проблема с переключением боковой панели с помощью jQuery

Question

Я пытаюсь создать простую переключаемую боковую панель с помощью jquery, где она расширяется и сжимается при нажатии кнопки.Кнопка также меняется на кнопку другого типа при нажатии.Боковая панель расширится, но по какой-то причине она не вернется в исходное положение.Вы можете увидеть копию javascript и html по адресу http://www.jqueryhelp.com/viewtopic.php?p=4241#4241

Вот рабочий код, спасибо 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

попробуйте вместо right использовать left с отрицательным числом.кроме того, я бы рекомендовал использовать preventDefault вместо возврата false .

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

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

Обновить

Еще одна деталь, которую я только что заметил, заключается в том, что вы прикрепляете событие click к кнопке .active, когда документ готов, но нет кнопки .active, когда документ готов, которая появляется после того, как вы его измените.Здесь есть пара вариантов.

Во-первых, это использовать новый ЖИВЫЕ КОНЦЕРТЫ особенность 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");
}); 

Другим вариантом было бы установить событие click для другого модификатора (например.на удостоверении личности, может быть).

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

затем используйте это для обработки щелчка

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

или даже более лаконичный

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

Последним вариантом, который я могу придумать, было бы установить события щелчка после того, как вы их измените, но я бы не стал этого делать, поэтому не собираюсь приводить образец.

Наконец, я бы ввел оповещение в ваш активный обратный вызов и убедился, что ваше событие active button действительно срабатывает.

Answer 2

Исходя из того, как написана ваша логика, я думаю, вам нужно сделать 'toggleClass' для обоих классов внутри ваших обработчиков кликов, которые добавят один и удалят другой.Например, при нажатии на ваш "активный" элемент вы переключаете (добавляете) класс btn-slide, но при этом "активный" класс тоже остается на месте.

Конечно, вместо использования "toggleClass" вы также могли бы использовать "addClass" и "removeClass", чтобы быть более явными.

Я рекомендую использовать такой инструмент, как Firebug, чтобы следить за тем, что происходит внутри вашего 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

Это работает.

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

Answer 4

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

CSS - файл

#main { height:200px; }

Объяснение

Хорошо, я решил сделать это немного по-другому.это инициализируется с высотой нашего эксперимента, равной 200 пикселям, а ширина задается автоматически.Когда вы нажимаете на гиперссылку, эксперимент скрывается через 1,3 секунды, а переключатель устанавливается в 0.когда вы нажимаете еще раз, он возвращается в течение 1,3 секунды, и переключатель возвращается в положение 1.как выключатель света.Я использовал анимацию здесь, потому что простое исчезновение или скрытие наскучило мне...

Причина, по которой я получил ширину и высоту элемента перед их обнулением, заключалась в том, что если бы в моем animate было указано width: 100%" и height: "100%", это установило бы его равным 100% от ширины и высоты страницы ... мы этого не хотим.

ПРИМЕЧАНИЕ :Я также использую непрозрачность в течение определенного периода времени.довольно хорошо подходит и для выцветания :)