2016-04-26 5 views
0

Ich habe ein Problem damit, dass Joomla ein Navigationsmenü auf der linken Seite der Webseite anzeigt. Ich möchte einige Untermenüs öffnen, wenn ich auf ihre Eltern klicke. Der gewünschte Effekt wird im mitgelieferten Codepen gezeigt. Aber ich möchte klicken, anstatt den Mauszeiger über den Gegenstand zu bewegen.Zeige verschachtelte Liste beim Klick in Joomla (1.7.0)

Die Sache mit Joomla ist, dass ich den "Eltern-li-Artikel" mit einem Artikel verknüpfen muss. Auch wenn ich die href mit Javascript entferne, lädt Joomla die Seite neu, wenn ich auf das "li" -Element klicke. Dies wird den gewünschten Effekt rückgängig machen (Ich habe versucht, eine spezifische Klasse mit Javascript anzuwenden, um "display: none" auf "display: block" in der verschachtelten Liste nach dem Klicken zu setzen).

Eine Lösung mit CSS, HTML, Javascript oder Joomla Override hätte meine Vorliebe.

PS: Mir ist bewusst, dass ich eine alte Version von Joomla verwende. Ich könnte es in naher Zukunft aktualisieren (wenn ich Zugriff auf das Kontrollfeld der Website habe).

PS2: Ich weiß, dass es ein kostenpflichtiges Plugin gibt, das das tut, aber ich arbeite auf einer Charity-Site und möchte Plugins auf ein Minimum beschränken. Ich würde auch gerne wissen, wie man das im Code macht!

HTML 

<ul> 
<li> 
<a href="something">Click me and don t load this link with Joomla</a> 
<ul> 
<li>Show me on click (not hover)</li> 
</ul> 
</li> 
</ul> 

.

CSS 

ul>li>ul{ 
    display: none; 
} 
ul>li:hover>ul{ 
    display: block; 
} 

Codepen

+0

Können Sie einen Link zur aktuellen Website bereitstellen? – mokiSRB

+0

Sie können das URL-Menü für Basis Eerste Hulp platzieren und auf # setzen. Wenn Sie darauf klicken, wird nur das Untermenü geöffnet. – mokiSRB

+0

@mokiSRB Nein, das öffnet das Untermenü leider nicht. Es wird einfach die Seite aktualisieren und # der aktuellen URL hinzufügen. Es ist diese Aktualisierung, die das Problem verursacht, weil es meinen angewandten Code "rückgängig" macht, um das Untermenü anzuzeigen. – RMo

Antwort

0

schaffte ich es mit diesem Code zu tun:

Die Funktion hasClass prüft, ob ein Element eine bestimmte Klasse hat.

Das FunktionsmenüMechanics deaktiviert die Links. Und fügt die Klasse hinzu oder entfernt sie, um die verschachtelte ul anzuzeigen oder auszublenden.

Die endgültigen Regeln des Codes fügen die menuMechanics-Funktion zu allen "has-nested-children" -Klassenelementen hinzu, nachdem Sie darauf geklickt haben.

<script type="text/javascript"> 
function hasClass(element, cls) { 
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; 
    } 

function menuMechanics(event){ 
    event.preventDefault(); 
    if(hasClass(this.parentElement, "active") === true){ 
     this.parentElement.className = this.parentElement.className.replace("active", ""); 
    } 
    else{ 
     this.parentElement.className += " active"; 
    } 
} 

hasNestedChildren = document.getElementsByClassName('has-nested-children'); 
    for(i=0; i<hasNestedChildren.length; i++){ 
     hasNestedChildren[i].addEventListener("click", menuMechanics); 
    } 
</script>