将此折叠的通知消息转换为可折叠和展开的消息

Question

我正在使用以下jQuery代码在页面顶部显示带有滑动动画的通知：

// Notification
$j("#notification").animate({
    height: "21px",
    opacity: 1,
    'padding-top': "8px"
}, 800 );

$j("#close-button").click( function() {
    $j("#notification").animate({
      height: "0px",
      opacity: 0,
      'padding-top': "0px"
    }, 800 );
});

实例：

http://www.taiwantalk.org/

现在，您可以折叠通知。但我想添加一个按钮，使您可以展开它并折叠它。

怎么做？

Answer 1

.slideToggle()在这里似乎很方便。

编辑：使用.slideToggle()

前提是您有一个类似以下内容的HTML元素：

<style type='text/css'>
#foo { height:100px; padding:10px; background-color:#fafafa; }
</style>
<div id='foo'>Ohayou Sekai!</div>
<button id='bar'>SLIDE!</button>

您可以使用.slideToggle()将其滑出视线/向后滑动。例如，我们将把它挂钩到按钮的click事件：

$('#bar').click(function() {
    $('#foo').slideToggle('fast');
});

它会自动决定是否应该滑动以隐藏或滑动以显示给您。

Here's a demo as well