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

你有panel.removeClass（'hidden'）;和panel.addClass（'hidden'）;

您可以使用jQuery show和hide方法替换它们，并可选择包含速度

例如

panel.hide('slow');

和

panel.show('slow');

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

Answer 2

Working DEMO

试试jQuery的slideDown＆amp; slideUp方法：

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

和

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

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

可折叠块与cookie的动画

2 个答案: