我在使用jQuery切换工具条时遇到了问题

Question

我正在尝试使用jquery创建一个简单的切换侧边栏，当按下按钮时，侧边栏将展开和收缩。按下该按钮时，该按钮也会变为另一种类型的按钮。侧边栏将会扩展，但由于某些原因，它不会移回原来的位置。您可以在http://www.jqueryhelp.com/viewtopic.php?p=4241#4241上查看javascript和html的副本

这是工作代码，谢谢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

尝试使用带负数的left而不是right。此外，我建议使用preventDefault而不是返回false。

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

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

更新

我刚刚注意到的另一件事是，当文档准备好时，您将一个单击事件附加到.active按钮，但是当文档准备好时，没有.active按钮，该按钮在您更改文档后进入。这里有几个选项。

首先是使用jQuery1.3的新live特性

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

另一种选择是在不同的修饰符上设置单击事件(例如，可能是在id上)。

<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

按照你的逻辑编写方式，我认为你需要在你的点击处理程序中的两个类上做一个'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;
    });
});