✔ firstChild

messmar

messmar

Erfahrenes Mitglied
Hallo,

ich habe die folgende Listennavigation;

<ul id="nav">
<li>Dummy Link Dummy Link
<ul>
<li>Subpunkt 1.1</li>
<li>Subpunkt 1.2</li>
<li>Subpunkt 1.3</li>
</ul>
</li>
<li>Dummy Link Dummy Link
<ul>
<li>Subpunkt 1.1</li>
<li>Subpunkt 1.2</li>
<li>Subpunkt 1.3</li>
</ul>
</li>
</ul>

und ich muus den Link: "Dummy Link Dummy Link" der über <ul></ul>
difeniert ist, beim öffnen der Liste eine andere Farbe z.B "red" eine andere Schriftgröße z.B. "bold" geben.

Ich habe es mit "ul[0].firstChild.style.color='red';" versucht, aber es funktioniert nicht und es greift auf Subpunkt 1.1 was ich eigentlich nicht will.

Ich wäre für einen Tipp oder Lösung sehr Dankbar

Der Code :

<html>
<script type="text/javascript">
function displaySubNav(li, display) {
var ul = li.getElementsByTagName('ul');
if (ul && ul[0])
ul[0].style.display = display;
ul[0].firstChild.style.color='red';
}

function hideNavigation() {
var nav = document.getElementById('nav');
var item = nav.firstChild;
while (item) {
if (item.tagName && item.tagName.toLowerCase() == "li") {
displaySubNav(item, "none");
}
item = item.nextSibling;
}
}

function showNavigation(li) {
hideNavigation();
displaySubNav(li, "block");

}

</script>


<body onload="hideNavigation()">

<ul id="nav">
<li><a href="#" onclick="showNavigation(this.parentNode);">Dummy Link Dummy Link</a>
<ul>
<li>Subpunkt 1.1</li>
<li>Subpunkt 1.2</li>
<li>Subpunkt 1.3</li>
</ul>
</li>
<li><a href="#" onclick="showNavigation(this.parentNode);">Dummy Link Dummy Link</a>
<ul>
<li>Subpunkt 1.1</li>
<li>Subpunkt 1.2</li>
<li>Subpunkt 1.3</li>
</ul>
</li>

</body>
</html>
 
Du übergibst der Funktion als li das Elternelement des angeklickten Links...also das <li>-Element.

var ul = li.getElementsByTagName('ul');
...damit verweist du auf die Auflistung der <ul>-Elemente in diesem <li>(darin liegt wohl dein Denkfehler, getElementsByTagName bezieht sich jetzt auf das <li> und nicht aufs gesamte Dokument)

ul[0].firstChild.style.color='red';
....verweist somit auf den ersten Kindknoten des ersten <ul> in besagtem <li>....und das Subpunkt 1.1

An den Link kommst du per
Code: 
li.firstChild

Kleiner Tipp:
Statt der umständlichen Zuweisung der CSS-Formate ist es komfortabler, die Klassen der jeweiligen Elemente zu ändern... die Formatzuweisungen kannst du dann bequem per CSS regeln :)
 
li.firstChild

Aber mit li.firstChild werden alle li rot markieret, was ich nicht will.

Es darf nur das firstChild des aufgeklappten menüs diese Eigenschaft bekommen.
Und wenn es zugeklappt wird und andere aufgeht, soll es wieder z.B. schwarz werden und das neu aufgeklapte rot .

<ul id="nav">
<li><a href="#" onclick="showNavigation(this.parentNode);">Dummy Link Dummy Link</a></li>
<li>
<ul>
<li>Subpunkt 1.1</li>
<li>Subpunkt 1.2</li>
<li>Subpunkt 1.3</li>
</ul>
</li>
<li><a href="#" onclick="showNavigation(this.parentNode);">Dummy Link Dummy Link</a>
<ul>
<li>Subpunkt 1.1</li>
<li>Subpunkt 1.2</li>
<li>Subpunkt 1.3</li>
</ul>
</li>
</ul>

Gruß
Amin
 
Du musst das gleich in function showNavigation(li) machen und nicht erst in displaySubNav() .....weil du diese Funktion ja schon per hideNavigation() für alle <li>'s ducrhläufst.
 
Hallo Sven,

es funktioniert zum Teil. Danke
Aber wenn ich die zweite li aufklappe und die erste zuklappe dann behält die erste z.B. die rote Farbe.

Die erste li muss in diesem Fall der ursprunglichen Zustand bekommen.

Code;

function showNavigation(li) {
hideNavigation();

displaySubNav(li, "block");
li.firstChild.style.color='green';
}

Gruß
Amin
 
Na das musst du dann halt wieder zurücksetzen.
Hier mal nen Bsp., wo das ganze wie angesprochen durch Änderung des Klassennamens funktioniert:
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function showNavigation(li) 
{
    for(i = 0; i < li.parentNode.childNodes.length; ++i)
        {
            if( li.parentNode.childNodes[i].tagName == 'LI')
                {
                    li.parentNode.childNodes[i].firstChild.onclick =
                        new Function('f2','showNavigation(this.parentNode)')
                    li.parentNode.childNodes[i].className = 
                        (li.parentNode.childNodes[i] == li)
                            ? (
                                (showNavigation.arguments.length > 1)
                                    ? 'aus'
                                    : 'an'
                              )
                            : 'aus';
            }
    }
}
window.onload = 
    new Function("f1","showNavigation(document.getElementById('nav').getElementsByTagName('li')[0],1)")
//-->
</script>
<style type="text/css">
<!--
.nav a{/*normal*/
    color:black;
    font-wight:normal}
.aus ul{/*subs verstecken*/
    display:none
}
.an ul{/*subs anzeigen*/
    display:block
}
.an a{/*aktiver Link*/
    color:red;
    font-weight:bold;
}
-->
</style>
</head>
<body>
<ul id="nav"class="nav">
 <li><a href="#">Dummy Link Dummy Link</a>
  <ul>
   <li>Subpunkt 1.1</li>
   <li>Subpunkt 1.2</li>
   <li>Subpunkt 1.3</li>
  </ul>
 </li>
 <li><a href="#">Dummy Link Dummy Link</a>
  <ul>
   <li>Subpunkt 2.1</li>
   <li>Subpunkt 2.2</li>
   <li>Subpunkt 2.3</li>
  </ul>
 </li>
</ul>
</body>
</html>
Der Vorteil: das Skript muss nicht mehr geändert werden, wenn du noch mehr styles ändern willst(es wird ja sicher nicht nur bei Farbe und fontweight bleiben;)), die Gestaltung erfolgt ausschliesslich per CSS
 
Hi Sven,

Danke schon mal. Aber wohier kommt das Parameter 'f2' in desr Funktion bzw. constructor NEW:
new Function('f2'.....)

Gruß
Amin
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück