TypoScript Problem mit jQuery Accordeon Menü

Hallo zusammen,

wäre echt der Hammer wenn jemand hierfür eine Lösung parat oder mir nen kleinen Tipp geben könnte.
Ich bin dabei ein Accordeon Menu in meine Seite zu integrieren. Alle mouseover und foldout actionen funktionieren auch soweit. Bis auf ....

Problem:
Sobald ich in einem Submenu also ebene 2. einen Menüpunkt anklicke fällt dieser wieder in sich zusammen und bleibt geschlossen. Erst nachdem mich ich mit mouseover einen anderen menüpunkt aufgefaltet habe kann ich auch wieder das aktive ausgewählt submennu öffnen ???? o.O

Ich habe versucht mit stayFolded = 1 und displayActiveOnLoad = 1 dem Herr zu werden jedoch bis jetzt ohne erfolg.

Mein Setup:
Ich habe die script dateien über workOnSubpart = ###Head### eingebunden, was dann so aussieht :
(BILD IM ANHANG)

Mein TypoScrpit dazu :

 temp.vmenu = HMENU
 temp.vmenu {
  
         excludeUidList =  4
         entryLevel = 1
      dontFollowMouse = 1
         wrap = <ul class="art-vmenu"> | </ul>
         
         1 = TMENU
         1.expAll = 1
        
         #1.displayActiveOnLoad = 1
         1.NO.wrapItemAndSub = <li> | </li>
         1.NO.stdWrap.htmlSpecialChars = 1
         1.NO.stdWrap.htmlSpecialChars.preserveEntities = 1
         
   
         1.CUR = 1
         1.CUR < .1.NO
         1.CUR.ATagParams = class="active"
         1.CUR.stayFolded = 1
   # ACT-Zustand der ersten Ebene:
         #1.ACT = 1
         #1.ACT < .1.CUR
         
         

   # Die zweite Ebene:
2 = TMENU
2.wrap = <ul> | </ul>

2.NO.wrapItemAndSub = <li> | </li>

# CUR-Zustand der zweiten Ebene:
2.CUR = 1
2.CUR < .2.NO
2.CUR.ATagParams = class="active"
}

Würde mich freuen wenn mir jemand helfen kann

de johnner#giggle#

Hallo,

ich glaube Dein Problem ist eher im JavaScript. Kannst Du das mal posten?

Viele Grüße

Hi SomehowLost,

ja hier das javascript für das menü ...

/* begin VMenu */
jQuery(function() {
    if (!jQuery('html').hasClass('ie7')) return;
    jQuery('ul.art-vmenu li:not(:first-child),ul.art-vmenu li li li:first-child,ul.art-vmenu>li>ul').each(function () { jQuery(this).append('<div class="art-vmenu-separator"> </div><div class="art-vmenu-separator-bg"> </div>'); });
});
jQuery(function() {
    setOpenSubmenuWithHover({vMenuClass: "art-vmenu", activeClass: "active", hoveredClass: "hovered"});
});    

(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev])}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev])};var handleHover=function(e){var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t)}if(e.type=="mouseenter"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob)},cfg.timeout)}}};return this.bind('mouseenter',handleHover).bind('mouseleave',handleHover)}})(jQuery);
function setOpenSubmenuWithHover(vMenuInfo) {
    jQuery("ul." + vMenuInfo.vMenuClass + " li").each(function () {
        var item = jQuery(this);
        var simple = item.children("ul").length == 0;
        if (!simple) {
            item.children("a").hoverIntent({interval: 200, over: function() {
                var link = jQuery(this);
                hideVMenuSubmenus(link, vMenuInfo.activeClass);
                showVMenuSubmenu(link, vMenuInfo.activeClass, vMenuInfo.hoveredClass, false);
            }, out: function () { }});
        } 
        item.children("a").bind("click", function(e) {
            var link = jQuery(this);
            hideVMenuSubmenus(link, vMenuInfo.activeClass);
            showVMenuSubmenu(link, vMenuInfo.activeClass, vMenuInfo.hoveredClass, simple);
        });
    });
}
function showVMenuSubmenu(link, activeClass, hoveredClass, simple) {
    if (simple) {
        if (!link.hasClass(activeClass)) link.addClass(activeClass);
        return;
    }
    if (!link.hasClass(activeClass)) {
        link.siblings("ul").slideDown("fast", function() {
            jQuery(this).siblings("a").removeClass(hoveredClass);
            jQuery(this).addClass(activeClass).siblings("a").addClass(activeClass);
            jQuery(this).css("display", "");
        });
    }
}
function hideVMenuSubmenus(link, activeClass) {
    link.parent().siblings().children("ul." + activeClass).slideUp(function() {
        jQuery(this).find("a, ul").removeClass(activeClass);
        jQuery(this).removeClass(activeClass).siblings("a").removeClass(activeClass);
        jQuery(this).css("display", "");
    });
    link.parent().siblings().children("a." + activeClass).removeClass(activeClass);
}

/* end VMenu */

Ich vermute es ist eine ganz einfache anweisung im TypoScript die fehlt oder falsch gesetzt ist ........ ACT und CUR ??? und da die richtige Anweisung ?

vielleicht siehst du ja den fehler 😉

gruß johnner

Hallo,

habe noch folgendes entdeckt.

Das Template mit dem Menü als Vorschau im Browser ergibt für das submenue

<ul class="active">.....</ul>

wo auch alles funktioniert.

In meiner TYPO3 installation wir daraus:

<ul style class="active">.... </ul>

Mir wird nicht ganz klar woher "style" kommt ....

hmmm.......