實施cookie以保存JQuery切換狀態

Question

我真的很感謝在cookie中實現cookie來保存切換狀態的幫助，我在下面的小提琴中使用他的代碼創建了切換，並嘗試在下面的線程中實現BARMAR的答案，但這改變了狀態標簽在它下面，並且在每次嘗試實現該頁面時都會在每次加載頁面時關閉標簽。

我看過的主題： 使用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/

它正在工作;-)