Question

我真的很感激帮助实现一个cookie以保存JQuery中的切换状态，我已经使用下面的小提琴中的代码创建了切换，并尝试在下面的线程中实现BARMAR的答案但是这改变了我试图实现它时，每次加载页面时都会关闭标签的状态。

线程我看过： Preserve toggle state using jQuery

到目前为止我的小提琴：

<script type="text/javascript">
$(function() {
    $('#slide1').click(function() {
        $('.slide1').slideToggle('slow');
        $('.toggle1').toggle();
        return false;
    });
});
</script>

<a href="#" id="slide1">Slide Toggle 
<span class="toggle1">+</span>
<span class="toggle1" style="display:none;">-</span>
</a>
<div class="slide1" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>

http://jsfiddle.net/fE6DJ/1/

任何帮助将不胜感激，

谢谢！

Answer 1

Cozmoz，

您可以使用此处引用的“Cookie”插件：http://plugins.jquery.com/cookie/ 要在您的解决方案中实现它，请在您的源代码中添加插件的javascript文件，并且不要忘记使用它从您的页面引用它。

然后，一些javascript：

$(document).ready(function() {
    // check the cookie when the page loads, opens it if needed (hidden by default)
    alert($.cookie('currentToggle'));
    if ($.cookie('currentToggle') === 'visible') {
        togglePanel(true);
    }

    //handle the clicking of the show/hide toggle button
    $('#slide1').click(function() {
        //toggle the panel as required, base on current state
        if ($('#slide1').text() === "Slide Toggle +") {
            togglePanel(true);
        }
        else {
            togglePanel(false);
        }
    });
});

function togglePanel(show) {
    var panel = $('.slide1panel');
    var button = $('#slide1');
    if (show) {
        panel.slideToggle('slow');
        button.text('Slide Toggle -');
        $.cookie('currentToggle', 'visible', { path: '/' });
    } else {
        panel.slideToggle('slow');
        button.text('Slide Toggle +');
        $.cookie('currentToggle', 'hidden', { path: '/' });
    }
}

将您的html简化为：

<a href="#" id="slide1">Slide Toggle +</a>
<div class="slide1panel" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>

更新你的小提琴：http://jsfiddle.net/fE6DJ/5/

它正在发挥作用; - ）

实现cookie以保存JQuery切换状态

1 个答案: