JavaScript: первые шаги. Как обратиться к вложенному элементу?

Question

[Blond]

Есть div. Внутри diva есть список. У списка есть класс в css "visible", где прописано свойство "opacity: 0".
Хочется при клике на div менять opacity вложенного списка на 1. При следующем клике - снова на 0. И так далее)
Принцип выпадающего меню.

Пока есть такой код:

html

<div class="box" id="boxS" onclick="visibleOnClick()">
	<ul class="visible">
	  <li>blabla</li>
	  <li>blabla</li>
       </ul>
</div>

css

.visibleOnClick {
	opacity: 0;
	filter: alpha(opacity=0);
}

js

function visibleOnClick () {
	var visible = document.getElementsByClassName('visible')[0];
	if ( visible.style.opacity == 0) {
		visible.style.opacity = 1; 
	}
	else {
		visible.style.opacity = 0;
	}
	
}

Хочется, честно говоря, обращаться непосредственно к списку как к потомку дива, избегая обращения к общему классу.

Взываю к снисходительности, как newbie)

Comments

[Opaspap]

лучше не делать onclick="visibleOnClick()" вешайте обработчик в скрипте.

[Blond]

@Opaspap

document.getElementsByClassName('box').onclick = function visibleOnClick ()

так?)

[llexa]

@Opaspap почему?

[Александр Вульф]

@Marriestein я думаю, так:

Array.prototype.forEach.call(document.getElementsByClassName('box'), function (elem) { 
  elem.addEventListener('click', function (event) {
    // your code here
  });
});

Answer 1

[Артур Смирнов]

Я бы сделал как-то так.

Answer 2

[Rsa97]

function visibleOnClick (node) {
    var visible = node.childNodes[1]; 
    visible.style.opacity = (visible.style.opacity == 0 ? 1 : 0);
}

<div class='box' onclick='visibleOnClick(this)'>
    <ul class='visible'>
	<li>blabla</li>
	<li>blabla</li>
    </ul>
</div>

this.childNodes[0] - текстовая нода, присутствует если между <div> и <ul> будет хоть один символ, в том числе и перевод строки.

.style.opacity сделает элемент прозрачным, но место занимать он по прежнему будет. Для освобождения пространства надо переключать .style.display между 'none' и 'block'.

Comments

[Blond]

Да, с display вариант был до этого, но потом появилась идея впоследствии сделать плавное появление) и с opacity показалось, что будет проще. А место занимает, но в свойствах есть position: absolute, поэтому наверно ничего страшного.

[Blond]

Спасибо!)