jQuery cookie, чтобы запомнить, какой список навигации открыт?

Я соединил ниже вместе моим (очень) скромным хакерским способом jQuery:

$(".toggle_container").hide();
                $(".trigger a").addClass("close");
                $(".trigger a").click(function() {
                $(".toggle_container").slideUp('200','swing');
                 $(".trigger a").removeClass("open").addClass("close");
                    if     ($(this).next(".toggle_container").is(":hidden")) {
                            $(this).next(".toggle_container").stop(true,false).slideToggle('200','swing');

                        }
                });

jsfiddle здесь: http://jsfiddle.net/FWzWu/8/

Я никогда не использовал плагин jquery cookie, но хотел бы использовать его сейчас, чтобы запоминать состояние меню пользователя от страницы к странице. Используя плагин github здесь: https://github.com/carhartl/jquery-cookie

Любая помощь наиболее ценится! Спасибо!

Источник

2 ответа

Решение

Первый удар (я добавил вызов event.preventDefault() чтобы действие привязки по умолчанию не происходило при нажатии - возможно, вам придется удалить это).

Это можно было бы сделать с некоторой очисткой, например, было бы хорошо воспользоваться делегированием события, чтобы зафиксировать событие щелчка на элементах привязки, надеясь, что оно передает, как использовать плагин и где его использовать.

 $(function () {   

    // give each container a unique class
    var containers = $("ul.toggle_container").hide().each(function (i,v) {
        $(this).addClass('container_' + i);       
    });

    var value = $.cookie('toggled_container');     

    // if we have a value in the cookie, use it to show that container
    if (value) {
        $('ul.' + value).show();
    }

    var anchors = $("li.trigger a");

    anchors.addClass("close").click(function() {
        containers.slideUp('200','swing');
        anchors.removeClass("open").addClass("close");
        var nextContainer = $(this).next("ul.toggle_container");
        if (nextContainer.is(":hidden")) {
            // capture the unique class that we have given the container
            $.cookie('toggled_container', nextContainer.attr('class').match(/container_\d+/));
            nextContainer.stop(true,false).slideToggle('200','swing');
        }
    });
});

Очевидно, что это решение предполагает, что ваши контейнеры никогда не будут меняться в количестве и порядке; если они это сделают, неправильный контейнер будет расширяться при загрузке страницы:)

Источник

На странице, которую вы перечисляете (github), есть файл readme, я никогда не использовал этот плагин, но он выглядит достаточно просто.

Убедитесь, что вы включили сценарий;

<script src="/path/to/jquery.cookie.js"></script>

Теперь каждый раз, когда вы хотите изменить значение куки (или создать куки в первую очередь) использовать;

$.cookie('cookie_name', 'cookie_value', { expires: 7 });

измените * cookie_name * и * cookie_value * на то, что вы хотите. Например

$.cookie('nav_choice', '1', { expires: 7 });

Затем каждый раз, когда вы загружаете страницу, запускайте это внутри document.ready;

var nav = $.cookie('nav_choice');

Затем вы можете запустить операторы if(), чтобы определить, что отображать.

Это помогает? Я могу уточнить, если это необходимо.

Источник
Другие вопросы по тегам