скрипт для вертикального меню

  • Автор темы Ledy
  • Дата начала
L

Ledy

#1
Здравствуйте!

Есть скрипт, основанный на JQuery, для вертикального меню с раскрывающимся списком:

jQuery.fn.initMenu = function() {
return this.each(function(){
var theMenu = $(this).get(0);
$('.acitem', this).hide();
$('li.expand > .acitem', this).show();
$('li.expand > .acitem', this).prev().addClass('active');
$('li a', this).click(
function(e) {
e.stopImmediatePropagation();
var theElement = $(this).next();
var parent = this.parentNode.parentNode;
if($(parent).hasClass('noaccordion')) {
if(theElement[0] === undefined) {
window.location.href = this.href;
}
$(theElement).slideToggle('normal', function() {
if ($(this).is(':visible')) {
$(this).prev().addClass('active');
}
else {
$(this).prev().removeClass('active');
}
});
return false;
}
else {
if(theElement.hasClass('acitem') && theElement.is(':visible')) {
if($(parent).hasClass('collapsible')) {
$('.acitem:visible', parent).first().slideUp('normal',
function() {
$(this).prev().removeClass('active');
}
);
return false;
}
return false;
}
if(theElement.hasClass('acitem') && !theElement.is(':visible')) {
$('.acitem:visible', parent).first().slideUp('normal', function() {
$(this).prev().removeClass('active');
});
theElement.slideDown('normal', function() {
$(this).prev().addClass('active');
});
return false;
}
}
}
);
});
};

$(document).ready(function() {$('.menu').initMenu();});

Подскажите пожалуйста что нужно в нем изменить, чтобы щелчок по элементу меню не только раскрывал подсписок, но и отображал прописанную в теге <a href="url"> страницу?
 

ikot

Active member
11.06.2008
27
0
#2
Здравствуйте!

Есть скрипт, основанный на JQuery, для вертикального меню с раскрывающимся списком:

jQuery.fn.initMenu = function() {
return this.each(function(){
var theMenu = $(this).get(0);
$('.acitem', this).hide();
$('li.expand > .acitem', this).show();
$('li.expand > .acitem', this).prev().addClass('active');
$('li a', this).click(
function(e) {
e.stopImmediatePropagation();
var theElement = $(this).next();
var parent = this.parentNode.parentNode;
if($(parent).hasClass('noaccordion')) {
if(theElement[0] === undefined) {
window.location.href = this.href;
}
$(theElement).slideToggle('normal', function() {
if ($(this).is(':visible')) {
$(this).prev().addClass('active');
}
else {
$(this).prev().removeClass('active');
}
});
return false;
}
else {
if(theElement.hasClass('acitem') && theElement.is(':visible')) {
if($(parent).hasClass('collapsible')) {
$('.acitem:visible', parent).first().slideUp('normal',
function() {
$(this).prev().removeClass('active');
}
);
return false;
}
return false;
}
if(theElement.hasClass('acitem') && !theElement.is(':visible')) {
$('.acitem:visible', parent).first().slideUp('normal', function() {
$(this).prev().removeClass('active');
});
theElement.slideDown('normal', function() {
$(this).prev().addClass('active');
});
return false;
}
}
}
);
});
};

$(document).ready(function() {$('.menu').initMenu();});

Подскажите пожалуйста что нужно в нем изменить, чтобы щелчок по элементу меню не только раскрывал подсписок, но и отображал прописанную в теге <a href="url"> страницу?
Особо не вникал в суть проблемы, но если нужно отобразить страницу с указанным URL, то первое что напрашивается это
Код:
document.location.href = URL;
. Сам адрес URL можно вытащить средствами того же jquery. Но при этом возникнет другая проблема - в текущее окно загрузится новый документ и он полностью заменит содержимое исходного документа, в частности пропадет и само меню. Тогда либо нужно в новом документе прописывать еще раз такое же меню, либо отображать новый документ в каком-то фрейме, либо подгружать его содержимое средствами Ajax. В последнем случае код для вашего меню естественно должен выглядеть по другому. Чтобы не заморачиваться посмотрите в google готовые решения для меню.
 
M

mak200

#4
помогите пожалуйста по этому же скрипту
вертикальное меню типа аккордеон:
Код:
jQuery.fn.initMenu = function() { 
return this.each(function(){
var theMenu = $(this).get(0);
$('.acitem', this).hide();
$('li.expand > .acitem', this).show();
$('li.expand > .acitem', this).prev().addClass('active');
$('li a', this).click(
function(e) {
e.stopImmediatePropagation();
var theElement = $(this).next();
var parent = this.parentNode.parentNode;
if($(parent).hasClass('noaccordion')) {
if(theElement[0] === undefined) {
window.location.href = this.href;
}
$(theElement).slideToggle('normal', function() {
if ($(this).is(':visible')) {
$(this).prev().addClass('active');
}
else {
$(this).prev().removeClass('active');
}	
});
return false;
}
else {
if(theElement.hasClass('acitem') && theElement.is(':visible')) {
if($(parent).hasClass('collapsible')) {
$('.acitem:visible', parent).first().slideUp('normal', 
function() {
$(this).prev().removeClass('active');
}
);
return false; 
}
return false;
}
if(theElement.hasClass('acitem') && !theElement.is(':visible')) {		 
$('.acitem:visible', parent).first().slideUp('normal', function() {
$(this).prev().removeClass('active');
});
theElement.slideDown('normal', function() {
$(this).prev().addClass('active');
});
return false;
}
}
}
);
});
};

$(document).ready(function() {$('.menu').initMenu();});
Задача прикрутить запоминание открытого раздела при переходе на др страницу.
Есть мысль сделать это через куки.
Здесь подробно описано как прикрутить память: http://alt-f4.ru/expanding-menu-by-jquery
Это делается при помощи двух вспомогательных функций:
Код:
function cookieSet(index) {
$.cookie('submenuMark-' + index, 'opened', {expires: null, path: '/'});
}
function cookieDel(index) {
$.cookie('submenuMark-' + index, null, {expires: null, path: '/'});
}
и дополнительного куска кода:
Код:
if ($.cookie('submenuMark-' + i)) {
$(this).show();
$(this).prev().removeClass('collapsed').addClass('expanded');
}else {
$(this).hide();
$(this).prev().removeClass('expanded').addClass('collapsed');
}
Но что-то не идет.
Не хватает квалификации. Прошу помощи.