javascript - 我在使用 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 按钮出现在您更改它之后。这里有几个选项。

首先是使用新的 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");
}); 

另一种选择是在不同的修饰符上设置点击事件(例如，可能在 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');  
}); 

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

最后，我会提醒您的事件回调并确保您的事件按钮事件实际触发。