Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > закрывается список при переходе


Автор: maslonax 12.3.2015, 07:10
Есть многоуровневый список:

Код

<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
Цитата(maslonax @  12.3.2015,  07:10 Найти цитируемый пост)
Я так понимаю это надо на сессию записывать куки?

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

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

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

Код

  $(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/

Автор: ksnk 12.3.2015, 13:14
https://jsfiddle.net/kqd88etc/3/

Примерно так

Автор: maslonax 12.3.2015, 13:42
Цитата(ksnk @ 12.3.2015,  13:14)
https://jsfiddle.net/kqd88etc/3/

Примерно так

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)