jquery accordion menü, submenü offen halten

  • Hallo zusammen,



    momentan bin ich dabei ein vertikales Menü zusammen zu Basteln.
    Nach vielen Testen und Googel suchen, habe ich mir nun einmal das Menü von
    http://perishablepress.com/jquery-accordion-menu-tutorial/
    auf http://mastazone.de eingebaut (linkes Menü).



    Das Menü tut im Grunde auch das was es soll, bis auf eine Kleinigkeit.
    Wenn das Untermenü geöffnet wird und ein klick auf einen der Untermenüpunkte gemacht wird, schliesst sich das Untermenü wieder.
    Eigentlich sollte das Untermenü geöffnet bleiben, bis man einen neuen Hauptmenüpunkt bzw. einen Menüpunkt aus dem anderen Menü anklickt.



    Hier einmal der Code:



    Menü:




    JQuery:





    CSS:




    Hat vlt. jemand eine Idee wie ich das bewerkstelligen kann.
    Ich verzweifel bald an der Geschichte.



    Im Voraus vielen Dank
    Grüße
    Denis

  • Moin Moin,



    mittlerweile habe ich als Test folgende Ergänzung erhalten.



    Menü:



    HTML
    1. <div id='cssmenu'><ul> <li><a href='http://mastazone.de'><span>Home</span></a></li> <li <?=($_GET['ausw'] == 'test1.1' || $_GET['ausw'] == 'test1.2') ? 'class="active"' : '';?>><a href='#'><span>Test1</span></a> <ul> <li><a href='/?ausw=test1.1'>Test1.1</a></li> <li><a href='/?ausw=test1.2'>Test1.2</a></li> </ul> </li> <li <?=($_GET['ausw'] == 'test2.1' || $_GET['ausw'] == 'test2.2') ? 'class="active"' : '';?>><a href='#'><span>Test2</span></a> <ul> <li><a href='/?ausw=test2.1'>Test2.1</a></li> <li><a href='/?ausw=test2.2'>Test2.2</a></li> </ul> </li> <li><a href='#'><span>Test3</span></a></li></ul></div>



    JQuery:

    HTML
    1. $(document).ready(function(){
    2. $('#cssmenu > ul > li:has(ul)').addClass("has-sub");
    3. $('#cssmenu > ul > li > a').click(function() { var checkElement = $(this).next(); $('#cssmenu li').removeClass('active'); $(this).closest('li').addClass('active'); if((checkElement.is('ul')) && (checkElement.is(':visible'))) { $(this).closest('li').removeClass('active'); checkElement.slideUp('normal'); } if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('#cssmenu ul ul:visible').slideUp('normal'); checkElement.slideDown('normal'); } if (checkElement.is('ul')) { return false; } else { return true; } });
    4. $("#cssmenu li.active > ul").slideDown(); //alle mit der Klasse "active" werden geöffent bei Seitenaufruf
    5. });



    Sprich im PHP Teil des Menüs wird geprüft, ob z.B. der Link "?ausw=test1.1" gesendet wurde und setzt dann auf den Container die class active.



    Im JQuery Teil wurde die Zeile



    HTML
    1. $("#cssmenu li.active > ul").slideDown(); //alle mit der Klasse "active" werden geöffent bei Seitenaufruf


    eingefügt.



    Das Menü bleibt allerding immer noch nicht offen.
    Man erkennt aber an dem " - " im Hauptmenü, dass wohl ein Active-Element erkannt wird, da dort ansonsten ein " + " stehen müsste.



    Soweit der Stand



    Grüße
    Denis

  • Problem ist gelöst.


    Jquery Code:


    HTML
    1. $(document).ready(function(){
    2. $('#cssmenu > ul > li:has(ul)').addClass("has-sub");
    3. $('#cssmenu > ul > li > a').click(function() { var checkElement = $(this).next(); $('#cssmenu li').removeClass('active'); $(this).closest('li').addClass('active'); if((checkElement.is('ul')) && (checkElement.is(':visible'))) { $(this).closest('li').removeClass('active'); checkElement.slideUp('normal'); } if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('#cssmenu ul ul:visible').slideUp('normal'); checkElement.slideDown('normal'); } if (checkElement.is('ul')) { return false; } else { return true; } });
    4. $("#cssmenu li.active > ul").show();
    5. });