jquery - 带有 cookie 的可折叠块的动画

Question

我几乎不知道javascript。有人可以帮我制作可折叠块的动画吗？

---

    $(document).ready(function() {
    var button = $('#hideButton');
    //check the cookie when the page loads
    if ($.cookie('currentToggle') === 'hidden') {
        togglePanel(button, false);
    }
    else {
        togglePanel(button, true);
    }
    //handle the clicking of the show/hide toggle button
    button.click(function() {
        //toggle the panel as required, base on current state
        if (button.text() === "+Показать блок контента") {
            togglePanel($(this), true);
        }
        else {
            togglePanel($(this), false);
        }
    });
});
function togglePanel(button, show) {
    var panel = $('#KeywordsPanel');
    if (show) {
        panel.removeClass('hidden');
        button.text('-Скрыть блок контента');
        $.cookie('currentToggle', '', { path: '/' });
    }
    else {
        panel.addClass('hidden');
        button.text('+Показать блок контента');
        $.cookie('currentToggle', 'hidden', { path: '/' });
    }
}

这就是我目前拥有的 - http://jsfiddle.net/HbPF5

Answer 1

工作演示

试试 jQuery 的 slideDown 和 slideUp 方法：

$(panel).slideDown('slow');

和

$(panel).slideUp('slow');

注意：您也不需要添加或删除显示类。

Answer 2

哪里有 panel.removeClass('hidden'); 和 panel.addClass('hidden');

你可以用 jQuery 的 show 和 hide 方法替换它们，并且可以选择包含一个速度

例如

panel.hide('slow');

和

panel.show('slow');

可以使用其他效果，这里的 jQuery 文档页面：http: //api.jquery.com/category/effects/