Выборка элементов querySelectorAll

[Nlk]

рони,
Спасибо, касаемо варианта с классом, по css не могу сообразить как должно выглядеть.

function myFunction() {
    this.classList.add("disable");
}

.disable .submenu {display: none;}

[Dilettante_Pro]

Не знаю, при чем тут .submenu, но

<style>
.disable, .submenu {display: none;}
</style>

<h1 class="oli">вариант 1</h1>
<p class="sd">вариант 2</p>
<p class="oli">вариант 3</p>

<script>
var x = document.querySelectorAll('.oli');
for(var i=0;i<x.length;i++)
    x[i].addEventListener("click", myFunction);

function myFunction() {
    this.classList.add("disable");
}
</script>

[рони]

по css не могу сообразить как должно

.disable > .submenu {display: none;}

Знаете ли вы селекторы?

[рони]

Nlk,

<meta charset="utf-8">
<style>
.oli {
  background-color: #EEE8AA;
   cursor: pointer;
}

.disable > .submenu {display: none;}
</style>

<div class="oli">вариант 1 <ul class="submenu"><li>test</li></ul></div>
<div class="sd">вариант 2</div>
<div class="oli">вариант 3 <ul class="submenu"><li>test</li></ul></div>

<script>
var x = document.querySelectorAll('.oli');
for(var i=0;i<x.length;i++)
    x[i].addEventListener("click", myFunction);

function myFunction() {
    this.classList.add("disable");
}
</script>

[рони]

Видимо classList не работает с nodeList если я правильно понимаю..

да

Но я всё равно не могу захлопнуть меню по клику.

делайте макеты целиком!!!

[Nlk]

Я вам всем ужасно благодарен на этом форуме! За ваше терпение и понимание.
А как мне реализовать переключение при повторном клике, как то так или использовать toggle?

function myFunction() {
	if (this.classList.add("disable")) {
		this.classList.remove("disable");
	}
}

или

this.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);

[Nexus]

function myFunction() {
	this.classList.toggle("disable");
}

[рони]

Nlk,

function myFunction() {
			this.classList.toggle("disable");
	
}

[Nlk]

Спасибо большое всё работает)
Как завершу выложу попрошу проверить.

А не могли бы рассказать про данную альтернативную реализацию меню.

[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){
    el.addEventListener('click', onClick, false);
});

Как я понимаю:
[].slice - в пустой массив производится копирование
call - посредством контекста
(document.querySelectorAll('.dropdown .nav-link')) - из nodeList'а
.forEach - который посредством метода forEach делает полноценный массив из классов.

[рони]

Nlk,
коллекции-не-массивы