Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Выборка элементов querySelectorAll (https://javascript.ru/forum/events/71107-vyborka-ehlementov-queryselectorall.html)

Nlk 27.10.2017 12:58

рони,
Спасибо, касаемо варианта с классом, по css не могу сообразить как должно выглядеть.
function myFunction() {
    this.classList.add("disable");
}

.disable .submenu {display: none;}

Dilettante_Pro 27.10.2017 14:31

Не знаю, при чем тут .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>

рони 27.10.2017 14:45

Цитата:

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

Цитата:

Сообщение от Nlk
.disable > .submenu {display: none;}

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

рони 27.10.2017 14:52

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>

рони 27.10.2017 15:06

Цитата:

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

да
Цитата:

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

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

Nlk 27.10.2017 15:26

Я вам всем ужасно благодарен на этом форуме! За ваше терпение и понимание.
А как мне реализовать переключение при повторном клике, как то так или использовать toggle?
function myFunction() {
	if (this.classList.add("disable")) {
		this.classList.remove("disable");
	}
}

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

Nexus 27.10.2017 15:30

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

рони 27.10.2017 15:31

Nlk,
:-?
function myFunction() {
			this.classList.toggle("disable");
	
}

Nlk 27.10.2017 16:48

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

А не могли бы рассказать про данную альтернативную реализацию меню.
[].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 делает полноценный массив из классов.

рони 27.10.2017 16:52

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


Часовой пояс GMT +3, время: 14:00.