我在使用 jQuery 切换侧边栏时遇到问题

Question

我正在尝试使用 jquery 创建一个简单的切换侧边栏，按下按钮时它会展开和收缩。 按下时该按钮也会变为另一种类型的按钮。 侧边栏将会展开，但由于某种原因，它不会移回原来的位置。 您可以在 http://www.jqueryhelp 中查看 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

尝试使用带有负数的 left 来代替 right。 另外我建议使用 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");
}); 

另一个选项是设置单击不同修饰符上的事件（例如，可能在 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;
    });
});

Answer 4

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

#main {
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
  <a href="#" id="ec">Expand / Contract</a>
  <div id="main">
    Watch Me Shrink Or Grow
  </div>
</div>

我选择以稍微不同的方式来做这件事。 初始化时我们实验的高度为 200px，宽度是自动的。 当您单击超链接时，实验将在 1.3 秒内隐藏，开关设置为 0。当您再次单击时，它会在 1.3 秒内返回，开关设置回 1。就像电灯开关一样。 我在这里使用了动画，因为简单的淡入淡出或隐藏让我感到无聊......

我在归零之前获得元素的宽度和高度的原因是如果在中说宽度：100％”和高度：“100％”我的动画会将其设置为页面宽度和高度的 100%...我们不希望这样

注意：我还在一段时间内使用了非常好的淡入淡出效果。出色地 ：）