Javascript I'；我在使用jQuery切换侧栏时遇到问题

我正在尝试使用jquery创建一个简单的切换边栏，当按下按钮时，边栏会展开和收缩。按下时，该按钮也会更改为其他类型的按钮。侧边栏将展开，但由于某种原因，它不会移回原来的位置。 您可以在以下位置看到javascript和html的副本：

这是工作代码，谢谢Bendway！：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");
});

---

尝试使用带负数的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的新特性

$(".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上）

或者更简洁

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

我能想到的最后一个选项是在更改单击事件后设置它们，但我不会这样做，所以我不提供示例

---

最后，我会在您的活动回调中加入警报，并确保您的活动按钮事件实际上正在触发。

按照编写逻辑的方式，我认为您需要在单击处理程序中对两个类都执行“切换类”，这将添加一个并删除另一个。例如，单击“活动”项时，您可以切换（添加）btn幻灯片类，但这也会保留“活动”类

当然，除了使用“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;
   });
}); 

这很有效

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

$（函数（）{
ECVAR开关=1；
/*防止恼人的滚动备份的事情*/
$（“#ec”）。单击（函数（e）{
e、 预防默认值（）；
var x=$（“#main”）.width（）；//获取元素宽度
var y=$（“#main”）.height（）；//获取元素高度
如果（ecswitch==1）{
$（“#main”）.animate({
不透明度：0，
高度：“0”，
宽度：“0”
}, 1300);
ecswitch=0；
}否则{
$（“#main”）.animate({
不透明度：1，
Hight:是的，
宽度：x
}, 1300);
ecswitch=1；
}
});
});
#主{
高度：200px；
}

看着我萎缩或成长
如果您在此处得到有效答案，请将您的代码复制到此网站，在您的问题中。我刚刚对我的答案添加了一个更新。我还对我的答案添加了另一个更改。我不确定你是否正确使用了toggleClass。如果需要打开/关闭它，则需要在活动和但滑块事件中调用它。抱歉，我的hasClass/is逻辑有一个小问题。而且还添加了一个更简洁的版本。它不会向后移动。建议：不要使用动画，从非常简单的hide（）和show（）开始，以确保事件处理程序和基本逻辑正常工作。如果成功了，那么就找出为什么你的动画调用被破坏了。好了，我们来做一点修改，加上CSS，第一次更新就成功了！我马上就发布工作脚本，谢谢。：）
$(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;
   });
}); 

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