通过动画的高度（不隐藏所有内容）显示内容

我想对部分显示一个列表，然后当一个按钮被点击我想通过使用全高度更改类的按钮和显示的完整列表的div，那么当再次点击按钮时，我希望它从最初的揭示开始，而不是隐藏整个事情。通过动画的高度（不隐藏所有内容）显示内容

HTML：

<section id="newsletters"> 
<h4><a href="#rss"></a><span>Related</span> Button</h4> 
    <nav> 
     <ul> 
      <li>1</li> 
      <li>1</li> 
      <li>1</li> 
      <li>1</li> 
      <li>1</li>  
     </ul> 
    </nav> 
<a class="hide" href="#">Show/Hide 
</a></section>

jQuery的

$('section#newsletters .hide').click(function() { 
    $('section#newsletters nav').toggle(400); 
    return false; 
    });

来源

2011-05-11 Andy

您必须创建自己的切换器。简单而直接：

var toggle = true, oldHeight = 0; 

$('section#newsletters .hide').click(function(event) { 
    event.preventDefault(); 

    var $ele = $('section#newsletters nav'); 
    var toHeight = ((toggle = !toggle) ? oldHeight : 20); 

    oldHeight = $ele.height(); 
    $ele.animate({ height: toHeight }); 

});

其中“20”是向上滑动时切换到的像素高度。

小提琴：http://jsfiddle.net/QV38D/

来源

2011-05-11 09:33:24

这个工程请客 – Andy 2011-05-11 09:37:05

谢谢大家，感谢大家的帮助... – Andy 2011-05-11 09:37:41

如何默认高度？如果我使用CSS，它会修复高度... – Andy 2011-05-11 10:24:58

您可能需要使用animate和代码的曲柄连杆机构自己。沿着以下线的东西：

$("section#newsletters .hide").click(function() { 
    $("section#newsletters nav").animate({ height: "100px"}, 400, 
     function() { $("section#newsletters").removeClass("hide").addClass("show"); } 
    ); 
}); 
$("section#newsletters .show").click(function() { 
    $("section#newsletters nav").animate({ height: "1000px"}, 400, 
     function() { $("section#newsletters").removeClass("show").addClass("hide"); } 
    ); 
});

的100px和1000px分别折叠和展开列表的高度。

来源

2011-05-11 09:11:57 Xion

其他内容上面坐着这样当我点击它，但多数民众赞成在即时通讯猜测事做与CSS ... – Andy 2011-05-11 09:32:08

展开高度也可改变......它不会永远是1000像素 – Andy 2011-05-11 09:34:51

这个讨论引发我找到一个几乎相同的问题的解决方案。下面是我用过的东西，只是我相信你需要的东西。

可以使用三元运算符设置高度变量，然后在animate（）上使用该变量。可以为animate设置更多选项（）我只包含高度。您可以使用相同的方法来更改显示/隐藏文本。

$('section#newsletters .hide').click(function() { 
    $(this).text($(this).text() == 'Show' ? 'Hide' : 'Show'); 
    var height = $('section#newsletters nav').height() == '[original height]' ? '[new height]' : '[original height]'; 
    $('section#newsletters nav').animate({height:height}; 
});

因此，例如，如果你想从50像素去为100px，然后回到50，你会怎么做：

$('section#newsletters .hide').click(function() { 
    $(this).text($(this).text() == 'Show' ? 'Hide' : 'Show'); 
    var height = $('section#newsletters nav').height() == '50' ? '100' : '50'; 
    $('section#newsletters nav').animate({height:height}; 
});

来源

2011-06-16 13:48:46 Bogeywebdesign

通过动画的高度（不隐藏所有内容）显示内容

回答

相关问题