Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 27.10.2017, 12:58
Аватар для Nlk
Nlk Nlk вне форума
Кандидат Javascript-наук
Отправить личное сообщение для Nlk Посмотреть профиль Найти все сообщения от Nlk
 
Регистрация: 25.12.2016
Сообщений: 146

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

.disable .submenu {display: none;}
Ответить с цитированием
  #12 (permalink)  
Старый 27.10.2017, 14:31
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Не знаю, при чем тут .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>
Ответить с цитированием
  #13 (permalink)  
Старый 27.10.2017, 14:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от Nlk
по css не могу сообразить как должно
Сообщение от Nlk
.disable > .submenu {display: none;}
Знаете ли вы селекторы?
Ответить с цитированием
  #14 (permalink)  
Старый 27.10.2017, 14:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

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>
Ответить с цитированием
  #15 (permalink)  
Старый 27.10.2017, 15:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от Nlk
Видимо classList не работает с nodeList если я правильно понимаю..
да
Сообщение от Nlk
Но я всё равно не могу захлопнуть меню по клику.
делайте макеты целиком!!!
Ответить с цитированием
  #16 (permalink)  
Старый 27.10.2017, 15:26
Аватар для Nlk
Nlk Nlk вне форума
Кандидат Javascript-наук
Отправить личное сообщение для Nlk Посмотреть профиль Найти все сообщения от Nlk
 
Регистрация: 25.12.2016
Сообщений: 146

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

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

Последний раз редактировалось Nlk, 27.10.2017 в 15:30.
Ответить с цитированием
  #17 (permalink)  
Старый 27.10.2017, 15:30
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,739

function myFunction() {
	this.classList.toggle("disable");
}
Ответить с цитированием
  #18 (permalink)  
Старый 27.10.2017, 15:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Nlk,

function myFunction() {
			this.classList.toggle("disable");
	
}
Ответить с цитированием
  #19 (permalink)  
Старый 27.10.2017, 16:48
Аватар для Nlk
Nlk Nlk вне форума
Кандидат Javascript-наук
Отправить личное сообщение для Nlk Посмотреть профиль Найти все сообщения от Nlk
 
Регистрация: 25.12.2016
Сообщений: 146

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

А не могли бы рассказать про данную альтернативную реализацию меню.
[].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 делает полноценный массив из классов.
Ответить с цитированием
  #20 (permalink)  
Старый 27.10.2017, 16:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Nlk,
коллекции-не-массивы
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery выборка элементов из переменной winch jQuery 4 15.04.2016 09:09
выборка элементов таблицы и цвет фона xber9 jQuery 10 07.08.2013 20:30
выборка видимых элементов ChikiSt Общие вопросы Javascript 8 01.12.2011 11:26
Выборка элементов у которых есть данные установленные через дата TicTac jQuery 2 02.05.2011 23:45
выборка элементов jetli13 jQuery 9 30.07.2010 13:53