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

尝试使用负数而不是正确使用左侧。另外我建议使用preventDefault而不是返回false。

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

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

更新

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

首先使用jquery 1.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");
});

另一个选项是将click事件设置在不同的修饰符上（例如，可能在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类，但这也会使“活动”类保持原位。

当然，您也可以使用“addClass”和“removeClass”来更明确地使用“toggleClass”，而不是使用“toggleClass”。

我建议使用像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; }

<强>解释

好吧我选择这样做的方式有点不同。这个初始化我们的实验高度为200px，宽度是自动的。单击超链接时，实验将在1.3秒内隐藏，并且开关设置为0.当您再次单击时，它会在1.3秒的时间内返回，并且开关将重新设置为1.就像一个灯开关。我在这里使用了动画，因为简单的淡化或隐藏让我感到无聊......

我之前得到元素的宽度和高度的原因是，如果所说的宽度：100％“和hieght：”100％“在我的动画中它将它设置为页面宽度的100％和身高......我们不希望这样。

注意：我也在一段时间内使用不透明度。非常好的褪色：）

我使用jQuery切换侧边栏时出现问题

4 个答案:

更新