запоминание положения отрытости/закрытости менюшки
делаю меню с "детьми".всё классно, всё выпадает и сворачивается(тут ничего сложного нет)
$('.withChildren span').click(function(e){ e.preventDefault(); var ul = $(this).parent().find('ul'); ul.toggle('slow'); }); <ul> <li><a href = "/">Новости</a></li> <li class="withChildren"><span class="asA">Сотрудники</span> <ul> <li><a href = "/staff/index/list">Список</a></li> <li><a href = "/staff/index/emails">Электронные адреса</a></li> </ul> </li> </ul> теперь надо сделать чтобы при обновлнеии страницы запоминалось положения открытости или закрытости меню...нашёл плугин для jquery который использует куки. пока что не пробовал его, но один факт что это возможно - радует. интересует как отследить положение ветки? то есть как мне увидить(какой атрибут-селектор) нужно искать, чтобы получить инфу о том открыта или закрыта ветка меню. пробовал ul.css('visibility') но всё время выдаёт что видно. |
Вешайте при сворачивании/разворачивании класс -- типа expanded/collapsed, по наличию и определяйте:
$('.withChildren span').click(function(e){ e.preventDefault(); var ul = $(this).parent().find('ul'); ul.toggleClass('expanded').toggleClass('collapsed').toggle('slow'); }); |
при обновлении страницы повешенные js-ом классы конечно же пропадут - от куков скорей всего не отделаться
|
Ну это естественно, тут либо куки либо на сервер-сайде запоминать
|
вернулся к этому вопросу.. использую плагин jquery.cookie.js
$('.accordion li ul').hide(); if($.cookie('openedmenu') != null) $('.accordion li ul#'+$.cookie('openedmenu')).show(); $('.accordion span.asA').click(function(e){ if($.cookie('openedmenu') === null || $(this).next().attr('id') != $.cookie('openedmenu')) { $.cookie('openedmenu',$(this).parent().find('ul').attr('id')); $('.accordion li ul').hide('slow'); $(this).parent().find('ul').show('slow'); } }); таких блочков у меня идёт несколько <ul class="accordion"> <li><a href = "/news/list.html">Новости</a></li> <li><span class="asA">Сотрудники</span> <ul id="menu2" > <li><a href = "/staff/list.html">Список</a></li> <li><a href = "/photos/list.html">Фотографии</a></li> <li><a href = "/staff/emails.html">Emails</a></li> <li><a href = "/photos/department/22.html">Совет директоров</a></li> </ul> </li> <li><span class="asA">Библиотека</span> <ul id="menu53" > <li><a href = "/documents/1.html">Документы</a></li> <li><a href = "/documents/2.html">Разное</a></li> </ul> </li> <li><a href = "/web-sites.html">Web сайты компании</a></li> <li><a href = "/board/list.html">Доска объявлений</a></li> <li><a href = "/wi-fi.html">Wi-Fi для гостей</a></li> </ul> в общем какойто бокопроство присходит: при раскрівании и клацании на ссылки внутри открытого блока бывате так что при переходе страницы открывается совершенно тругой блок!!! ps: ну и сам вопрос, почему так происходит??? |
Цитата:
|
Олег,
вам кук чтоли жалко? |
Да
|
Так отключите.
|
поскольку проект надо было срочно сдавать выкрутился запоминанием в сессии на сервере
$('.accordion li ul').hide(); $.ajax({ type: "POST", url: "/index/menuposition/", dataType: 'json', //data: "name=John&location=Boston", success: function($data){ //alert( $data[0] ); if($data !== null ) { $('.accordion li ul#'+$data[0]).show(); } } }); //if($.cookie('openedmenu') !== null) $('.accordion li ul#'+$.cookie('openedmenu')).show(); $('.accordion span.asA').click(function(e){ var id = $(this).parent().find('ul').attr('id').toString(); $.ajax({ type: "POST", url: "/index/menuposition/", data: "id="+id, success: function($data){ //var $id = $data[0]; } }); $('.accordion li ul:visible').hide('slow'); $(this).parent().find('ul').show('slow'); }); аджакс запрос сохраняет и получает данные об открытости менюшки, на сервере данные заносятся в сессию... тут конечно менюшка у меня всего двухуровневая и как это всё дело вести себя будет на третьем уровне не знаю. правда теперь скорость страдает..не то чтобы очень сильно, но всё-таки. |
имхо самый нормальный вариант - делать это на сервере, причем хранить ничего не надо, просто есть текущая страница и соответствующий пункт нужно выделить
p.s. естественно не через ajax |
Часовой пояс GMT +3, время: 02:32. |