• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Frage zu "parentElement"

jeffglennfox

New member
Frage zu "nextSibling"

Hallo,

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

HTML:
<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>

Code:
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:

Code:
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
 
Zuletzt bearbeitet:
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.
 
Zurück
Oben