VPF::закрывается список при переходе

maslonax

Дата 12.3.2015, 07:10 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 12.3.2015

Репутация: нет
Всего: нет

Есть многоуровневый список:

Код


<div id='cssmenu'>
    <ul>
       <li class='has-sub'><a href='#'><span>Главная</span></a>
          <ul>
             <li class='active'><a href='#'><span>Сведения об образовательной организации. Контакты</span></a></li>
             <li class='active'><a href='#'><span>Фотогалерея</span></a><li>
             <li class='active'><a href='#'><span>Попечительский совет</span></a><li> 
         <li class='active'><a href='#'><span>История колледжа</span></a><li>
             <li class='active'><a href='#'><span>О наших выпускниках</span></a><li>    
          </ul>
       </li>
 <li class='has-sub'><a href='#'><span>Студенту. Очное и заочное отделение</span></a>       
          <ul>
             <li class='active'><a href='#'><span>Сведения об образовательной организации. Контакты</span></a></li>
             <li class='active'><a href='#'><span>Очное отделение</span></a><li>
             <li class='active'><a href='#'><span>Заочное отделение</span></a><li> 
         <li class='active'><a href='#'><span>Учебная и производственная практика</span></a><li>
             <li class='has-sub'><a href='#'><span>Студенческое самоуправление</span></a>
        <ul>
            <li class='active'><a href='#'><span>1</span></a></li>
                <li class='active'><a href='#'><span>2</span></a><li>
        </ul>
        <li>    
          </ul>
</li>
    </ul>
</div>

Открывается и закрывается с помощью скрипта:

Код


$(document).ready(function () {
    $('#cssmenu li.has-sub > a').on('click', function(){
        $(this).removeAttr('href');
        var element = $(this).parent('li');
        if (element.hasClass('open')) {
            element.removeClass('open');
            element.find('li').removeClass('open');
            element.find('ul').slideUp();
        }
        else {
            element.addClass('open');
            element.children('ul').slideDown();
            element.siblings('li').children('ul').slideUp();
            element.siblings('li').removeClass('open');
            element.siblings('li').find('li').removeClass('open');
            element.siblings('li').find('ul').slideUp();
        }
    });
 
    $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');
});

Проблема при переходе на др страницу список естественно закрывается. Хотелось бы чтоб запоминалось положение списка. Я так понимаю это надо на сессию записывать куки? Проблема в том что я только начинаю развиваться в этом направление и хотел бы попросить помощи с примерным написание скрипта ну или каких либо советов. Заранее спасибо.

ksnk

Дата 12.3.2015, 08:21 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Цитата(maslonax @ 12.3.2015, 07:10

)

Я так понимаю это надо на сессию записывать куки?

Какая интересная фраза smile

Открой для себя localStorage smile

В нем сохранять статус узлов (открыт-закрыт) и восстанавливать его при загрузке страницы
Единственная неловкость при использовании такой техники - при перезагрузке страницы развесистое дерево начинает дергаться и моргать, когда вспоминает открытые-закрытые пункты. Чтобы такого не было, можно его выводить скрытым, открыть-закрыть при загрузке и потом показать...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

maslonax

Дата 12.3.2015, 09:21 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 12.3.2015

Репутация: нет
Всего: нет

А можно поподробнее? Просто в этом особо не разбираюсь, а на работе озадачили...

Нашел на одном из форумов похожую проблему но там немного по другому меню устроенно. Там для него написали такой скрипт

Код


  $(document).ready(function(){
        // если есть куки то извлекаем 
        if($.cookie("menu")) {
        var cssD = $.cookie("menu");
                        $('.sub-menu ul').css('display',cssD);
            if(cssD=="block"){$('.sub-menu').addClass('selected hovered');}
            else{$('.sub-menu').removeClass('selected hovered');}           
         };
         
        $('.sub-menu').click(function(){
            $(this).toggleClass('selected');
            
            if($(this).hasClass('selected')==true){
                $('.sub-menu').addClass('hovered');
                $('.sub-menu ul').slideDown('slow')
            }else{
                $('.sub-menu ul').slideUp('slow',function(){
                    $('.sub-menu').removeClass('hovered');
                })
            }
            
             // записываем в переменную о состоянии меню
              setTimeout(function(){
                 var cssD = $('.sub-menu ul').css('display');
                $.cookie("menu", cssD);
                 
                 },1200) 
        });

Можно ли его для моего варианта переделать?

Наглядный вид моего меню: https://jsfiddle.net/kqd88etc/1/

Это сообщение отредактировал(а) maslonax - 12.3.2015, 09:22

ksnk

Дата 12.3.2015, 13:14 (ссылка)

(голосов:1)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

https://jsfiddle.net/kqd88etc/3/

Примерно так

Это сообщение отредактировал(а) ksnk - 12.3.2015, 13:36

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

maslonax

Дата 12.3.2015, 13:42 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 12.3.2015

Репутация: нет
Всего: нет

Цитата(ksnk @ 12.3.2015, 13:14)

https://jsfiddle.net/kqd88etc/3/

Примерно так

Спасибо! Очень выручил.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »