Jquery Toggle按钮和状态已关闭

时间:2012-12-17 06:30:52

标签: jquery toggle

我有一个按钮可以切换我的页脚。当前代码以页脚关闭开始。我的问题是我该怎么做才能打开默认状态?我已经尝试了几种配置,但不确定什么是正确的。当我在浏览器上检查cookie时,默认状态为“隐藏”。

// Toggle Button

$(document).ready(function() {
var button = $('.toggle');

//check the cookie when the page loads
if ($.cookie('currentToggle') ==='visible') {
    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 = $('footer');

if (show) {
    panel.slideUp('slow');
    button.text('+');
    $.cookie('currentToggle', 'hidden', { path: '/' });

}
else {
    panel.slideDown('slow');
    button.text('-');
    $.cookie('currentToggle', 'visible', { path: '/' });

}
}

1 个答案:

答案 0 :(得分:0)

我认为你只需要这一行来处理没有设置cookie的情况:

if (!$.cookie('currentToggle'))
    $.cookie('currentToggle', 'visible');

将它放在//check the cookie when the page loads

之前

或者,更简单,只需在您进行检查时反转您的逻辑:

if ($.cookie('currentToggle') === 'hidden') {
    togglePanel(button, true);
} else {
    togglePanel(button, false);
}