jQuery 切换帮助答案

【问题标题】：JQuery Toggle HelpjQuery 切换帮助
【发布时间】：2011-08-17 15:23:04
【问题描述】：

这里的代码会打开一个 div 并对其进行动画处理.. 对吗？是的，这对我来说很好......

jQuery("a.trigger").click(function(){
    $("#main").animate({
      height: "+=300px"
    }, 1500 );
    return false;
});

我的问题是，我该如何切换它？我可以打开它，但我如何关闭它......意味着......高度滑动 200 像素。你懂我的意思吗？我点击“阅读更多”（a.trigger），它动画高度+200px..但我也想把它动画回-200px。

我被困住了，因为我不是 jquery 专家。我尝试使用 SlideToggle 或切换，但它对我不起作用....

感谢您的帮助！

【问题讨论】：

这与您的问题无关，但 return false 是多余的，因为如果您不从函数返回值，JavaScript 会隐式返回 undefined，false 和 @987654325 @ 是假值。

标签： jquery html height toggle

【解决方案1】：

可能通过设置一个持有状态的类

jQuery("a.trigger").click(function(){
    if (!$("#main").is(".open")) {
        $("#main").animate({
            height: "+=300px"
        }, 1500 ).addClass('open');
    } else {
        $("#main").animate({
            height: "-=300px"
        }, 1500 ).removeClass('open');
    }
    return false;
});

【讨论】：

【解决方案2】：

您正在寻找切换功能。

jQuery("a.trigger").toggle(function(){
  $("#main").animate({
    height: "+=300px"
    }, 1500 );
    return false;
  }, function(){
  $("#main").animate({
    height: "-=300px"
  }, 1500 );
  return false;
});

【讨论】：

【解决方案3】：

如果我没看错，那么这就是你想要做的。

http://jsfiddle.net/JqN4p/

【讨论】：

不，我的意思是初始状态... div 已经有 470 像素，我想将它扩展大约。多 300 像素（向下滑动）
好吧，你可以这样做：jsfiddle.net/JqN4p/2 但是它不是很精致。如果您在 read more 上快速单击多次，那么您会在动画中看到错误。

【解决方案4】：

jQuery("a.trigger").toggle(function()
{
    $("#main").animate (... height+=300));
}, function()
{
    $("#main").animate (... height-=300));
});

您也可以使用 slideToggle：

jQuery("a.trigger").click(function(){ $("#main").slideToggle(); });

【讨论】：

div 也有固定高度？我的#main div 在 css 中的起始高度为 472px？
如果您希望您的 div 部分向下滑动，那么您应该使用第一个代码，如果您希望它完全向下滑动并向上第二个代码可以工作。

【解决方案5】：

jQuery("a.trigger").click(function(){
   if( $("#main").hasClass('active') )
        value  = -300;
   else
      value = 300; 
    $("#main").addClass('active').animate({
      height: "+=" + value + 'px'
    }, 1500 );
    return false;
});

这是一个有效的小提琴 http://jsfiddle.net/QVJPZ/

【讨论】：

【解决方案6】：

jQuery slideToggle 会很好地为您做到这一点：

$('a.trigger').click(function() {
  $('#main').slideToggle('slow', function() {
    // Animation complete.
  });
});

http://api.jquery.com/slideToggle/

【讨论】：