Блог

Главная - Вопросы по программированию - Выпадающий список Javascript для сенсорных устройств

Выпадающий список Javascript для сенсорных устройств

#javascript

#javascript

Вопрос:

Я пытаюсь открыть и закрыть подменю по классу toggle .

Почему класс on не переключается при нажатии, чтобы скрыть подменю?

 var u = document.querySelector('ul');
var l = u.querySelectorAll("li");
var a = u.querySelectorAll('li.hasul > a');

for(var i=0; i<a.length;i  ){
  a[i].addEventListener('click', function(){
    l.forEach(function(i,n){
      i.classList.remove('on');
    });
    event.target.parentNode.classList.toggle('on');
   });
}  
 ul{display:flex; list-style:none;}
li{margin:5px;
  position: relative;
  font-size: 20px;
}
li ul{
  border: 1px solid #ccc;
  padding: 10px;
  position: absolute;
  left: 0;
  width: 150px;
  top: 40px;
  display: none;
}
li.on{
  border-bottom: 3px solid red;
}
li.on ul{
  display: block;
}
a{text-decoration:none;display:block; padding: 5px;}  
 <ul>
<li class="hasul"><a href="#">Item 1</a>
    <ul>
    <li><a href="#">Level 2</a></li>
    <li><a href="#">Level 2</a></li>
    <li><a href="#">Level 2</a></li>
    </ul>
</li>
<li class="hasul"><a href="#">Item 2</a>
    <ul>
    <li><a href="#">Level 2</a></li>
    <li><a href="#">Level 2</a></li>
    <li><a href="#">Level 2</a></li>
    </ul>
</li>
</ul>

https://codepen.io/felixaj/pen/poyyper

Комментарии:

1. Что делает l.forEach() часть? Похоже, что его удаление заставляет программу работать должным образом

2. @Abhishek как удалить класс «вкл.» для других братьев и сестер, когда открыто одно меню

Ответ №1:

Вы должны использовать touchstart событие, а не click для мобильных устройств (проверьте здесь)

Ответ №2:

добавьте display:none; в правило on css