запоминание положения отрытости/закрытости менюшки
делаю меню с "детьми".всё классно, всё выпадает и сворачивается(тут ничего сложного нет)
$('.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');
});
аджакс запрос сохраняет и получает данные об открытости менюшки, на сервере данные заносятся в сессию... тут конечно менюшка у меня всего двухуровневая и как это всё дело вести себя будет на третьем уровне не знаю. правда теперь скорость страдает..не то чтобы очень сильно, но всё-таки. |
| Часовой пояс GMT +3, время: 23:24. |