1

我正在尝试使用 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");
});
4

4 回答 4

3

尝试用负数代替右使用左。此外，我建议使用 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');  
});

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

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

于 2009-02-11T15:51:53.150 回答
0

您的逻辑编写方式，我认为您需要在单击处理程序内的两个类上执行“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;
   });
});
于 2009-02-11T15:59:18.123 回答
0

这行得通。

$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#sidebar").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});
于 2009-02-12T07:52:14.133 回答
0 

$(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>

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

我在将元素归零之前获得元素的宽度和高度的原因是，如果在我的动画中说 width:100%" 和 height:"100%" 它会将其设置为页面宽度和高度的 100%.. .我们不希望那样。

注意：我也在一段时间内使用不透明度。褪色也很好:)

于 2009-04-23T11:23:27.257 回答