我有与使用jQuery的反复侧边栏的问题

Question

我试图创建使用jQuery，在其膨胀和收缩时，按下按钮的简单拨动侧边栏。当按下按钮也变为另一种类型的按钮。侧边栏将扩大，但由于某些原因，它不会搬回到原来的位置。 //www.jqueryhelp：您可以在 HTTP看到JavaScript和HTML的副本的.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

尝试代替留下一个负数使用权。另外我建议使用而不是返回false的preventDefault。

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

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

更新

另一块我只是注意到的是，你的附加click事件的。主动按钮，当文件已准备就绪，但目前还没有。主动按钮，当文档准备好你改变它之后的用武之地。这里有几个选项。

首先是使用新住的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>     

然后使用此处理click

$("#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-滑类，但是这将离开“活动”类的地方了。

当然，而不是使用“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; }

<强>解释

OK，我选择以不同的方式做到这一点。此初始化与我们的实验的高度为200像素并且宽度是自动的。当您单击超链接的实验是隐藏1.3秒，当您再次单击它回来过了一段1.3秒，开关被设置回1.像一盏灯开关的开关被设置为0。我这里使用的动画，因为一个简单的淡化或隐藏让我无聊...

为什么我之前得到了元素的宽度和高度的原因零-ING他们是，如果说宽度：100％”和hieght：‘100％’在我的生命的，将其设置为页面的宽度为100％和高度......我们不希望出现这种情况。

注意：我也使用不透明度在一段时间内。相当不错衰落，以及：）