Frage zu "parentElement"

[jeffglennfox]

Frage zu "nextSibling"

Hallo,

ich bastel mir gerade eine Navigation zusammen und ist alles noch etwas in der Rohfassung:

<div class="nav-aside-box">
<h2>
<div class="icon-hover nav-aside-open" id="meeting-cat">Kategorie<img class="arrow-nav-aside" src="down-arrow.svg"></div>
<div id="meeting-cat-close" class="nav-aside-close"><a href="#">X</a></div>
</h2>
<ul id="meeting-cat-ul" class="nav-aside-ul">
<li><a href="">Kategorie 1</a></li>
<li><a href="">Kategorie 2</a></li>
<li><a href="">Kategorie 3</a></li>
</ul>
</div>

var items = document.getElementsByClassName('nav-aside-open');

for (var i = 0; i < items.length; i++) {

  items[i].addEventListener('click', openNavLeft);
  
}


var items = document.getElementsByClassName('nav-aside-close');

for (var i = 0; i < items.length; i++) {

  items[i].addEventListener('click', closeNavLeft);
  
}


function openNavLeft() {    

var div = document.getElementById(this.id).id;

var h2 = document.getElementById(div).parentElement;

var open = document.getElementById(div).firstElementChild; 

var close = document.getElementById(div).nextSibling;

var ul =  document.getElementById(div+'-ul'); 

ul.style.display = 'block'; open.style.display = 'none'; close.style.display = 'block'; h2.style.borderBottom = "1px solid #ccc"; document.getElementById(div).style.color = '#000'; 

}


function closeNavLeft() {

var div = document.getElementById(this.id).previousSibling.id;

var h2 = document.getElementById(this.id).parentElement;

var open = document.getElementById(div).firstElementChild;                                               

var close = document.getElementById(this.id);

var ul =  document.getElementById(div+'-ul'); 
                                                                                              
h2.style.borderBottom = "none"; open.style.display = 'inline-block'; close.style.display = 'none'; ul.style.display = 'none'; document.getElementById(div).style.color = '#003399';  

}

Ich würde mir gerne noch weiter "Div-Id's einsparen - in konrekten Fall das mit der Bezeichnung "meeting-cat-close" . Ich wollte daher die Funktion "closeNavLeft" so ändern:

var items = document.getElementsByClassName('nav-aside').nextSibling;

for (var i = 0; i < items.length; i++) {

  items[i].addEventListener('click', closeNavLeft);
  
}

Funktioniert so leider nicht. Was mache ich falsch ?

Des weiteren würde ich gerne aus dieser Funktion auf das Element <ul> , also ausgehend von der ID 'meeting-cat' zugreifen damit ich hier ebenfalls keine eigene ID verwenden muss. Wie könnte hier ein Zugriff erfolgen ?

Gruss von

Markus

 

[Dormilich]

Was mache ich falsch ?

du behandelst eine Liste als Element.

 

[jeffglennfox]

du behandelst eine Liste als Element.

Danke für den Hinweis und ich habe verstanden. Dann sollte es so funktionieren ...

var items = document.getElementsByClassName('nav-aside');

for (var i = 0; i < items.length; i++) {

  items[i].nextSibling.addEventListener('click', closeNavLeft);
  
}

Gruss

von Markus

 

[kkapsner]

Ich würde ja nicht über nextSibling gehen, da das extrem leicht kaputt gehen kann. Ich würde auf das Elternelement gehen (.parentNode) und dann auf diesem per .getElementyByClassName("nav-aside-close") nach dem entsprechenden Objekt suchen.

Da in deinem HTML kein Element mit der Klasse nav-aside zu sehen ist, kann ich dir bei deiner zweiten Frage leider nicht helfen.