关于 jquery 中的 toggle() 效果和事件的混淆答案

【问题标题】：confusion regarding toggle() effect and event in jquery关于 jquery 中的 toggle() 效果和事件的混淆
【发布时间】：2013-06-26 18:56:32
【问题描述】：

我有两个 div 元素“触发器”和“目标”。我一直在寻找一种机制，每次单击“触发器”时，脚本都会为“目标”的高度设置动画。但是我需要它在 0px 和 100px 之间切换。经过一番研究，我发现this

经过一番搜索，我找到了以下脚本

$("#trigger").toggle(function(){
    $("#target").animate({height:40},200);
},function(){
    $("#target").animate({height:10},200);
});

但它似乎没有工作.. 经过更多搜索后，我遇到了以下脚本

 $(document).ready(function()
    {$("#trigger").click(function()
 {
  $('#target').toggle(
function()
 {
  $('#target').animate({height: "250"}, 1500);
 },
function()
  {
   $('#target').animate({height: "0"}, 1500);
  });
 });
});

这也不起作用。元素确实会产生动画，但随着高度、宽度和不透明度也会产生动画。进一步的研究使我发现this 效果。所以基本上有两个toggle()。在 jquery 中，我对每个如何使用感到困惑。我想要做的就是在单击另一个元素时通过切换为一个元素的高度设置动画。我希望我已经足够清楚了。

【问题讨论】：

jQuery 的.toggle() 函数有两种不同的形式。每次单击时切换的一个和切换元素可见性的一个。第一个在不久前被删除了。
是的，在 1.9 中删除：api.jquery.com/toggle-event
哦，我不知道。这正是让我感到困惑的地方。

标签： javascript jquery

【解决方案1】：

您可以添加一个变量，例如 var trigger = false;

var trigger = false;

$("#trigger").click(function(){
    if(!trigger) {
        $("#target").animate({height:40},200);
        trigger = true;
    }
    else {
        $("#target").animate({height:10},200);
        trigger = false;
    }
});

【讨论】：

【解决方案2】：

您可以改用toggleClass：

$("#trigger").click(function() {
  $(".target").toggleClass("higher");
});

然后在你的 CSS 中使用：

.target {
  height:50px;
  background-color:#f00;
  -webkit-transition: height 1s;
  -moz-transition: height 1s;
  -ms-transition: height 1s;
  -o-transition: height 1s;
  transition: height 1s;
}
.higher {
  height:100px;
}

http://jsfiddle.net/JSfa3/

【讨论】：