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

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем Ledy, 17 апр 2011.

  1. Ledy

    Ledy Гость

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

    Есть скрипт, основанный на 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"> страницу?
     
  2. ikot

    ikot Active Member

    Регистрация:
    11 июн 2008
    Сообщения:
    27
    Симпатии:
    0
    Особо не вникал в суть проблемы, но если нужно отобразить страницу с указанным URL, то первое что напрашивается это
    Код (Text):
    document.location.href = URL;
    . Сам адрес URL можно вытащить средствами того же jquery. Но при этом возникнет другая проблема - в текущее окно загрузится новый документ и он полностью заменит содержимое исходного документа, в частности пропадет и само меню. Тогда либо нужно в новом документе прописывать еще раз такое же меню, либо отображать новый документ в каком-то фрейме, либо подгружать его содержимое средствами Ajax. В последнем случае код для вашего меню естественно должен выглядеть по другому. Чтобы не заморачиваться посмотрите в google готовые решения для меню.
     
  3. Ledy

    Ledy Гость

    Спасибо за помощь!
     
  4. mak200

    mak200 Гость

    помогите пожалуйста по этому же скрипту
    вертикальное меню типа аккордеон:
    Код (Text):
    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
    Это делается при помощи двух вспомогательных функций:
    Код (Text):
    function cookieSet(index) {
    $.cookie('submenuMark-' + index, 'opened', {expires: null, path: '/'});
    }
    function cookieDel(index) {
    $.cookie('submenuMark-' + index, null, {expires: null, path: '/'});
    }
    и дополнительного куска кода:
    Код (Text):
    if ($.cookie('submenuMark-' + i)) {
    $(this).show();
    $(this).prev().removeClass('collapsed').addClass('expanded');
    }else {
    $(this).hide();
    $(this).prev().removeClass('expanded').addClass('collapsed');
    }
    Но что-то не идет.
    Не хватает квалификации. Прошу помощи.
     
Загрузка...

Поделиться этой страницей