У меня проблема с переключением боковой панели с помощью 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

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

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

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

Обновление

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

Сначала нужно использовать новую live функцию 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');  
}); 

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

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

Answer 2

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

Объяснение

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

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

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

Answer 3

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

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

Answer 4

Как написана ваша логика, я думаю, вам нужно сделать '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;
   });
});