jeffglennfox
New member
Frage zu "nextSibling"
Hallo,
ich bastel mir gerade eine Navigation zusammen und ist alles noch etwas in der Rohfassung:
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:
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
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: