[英]Javascript dropdown for touch devices
我正在尝试通过 class 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>
您应该使用touchstart
事件,而不是click
手机(检查这里)
添加显示:无; 在对CSS规则
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.