将事件侦听器添加到 <li> 分子
[英]Adding Event Listeners to <li> elements
问题描述
I am trying to make a simple drop down menu using CSS + JavaScript. 
我正在尝试使用CSS + JavaScript创建一个简单的下拉菜单。 I got the CSS part. 我得到了CSS部分。
Now, I'm trying to add event listeners to the li elements that when clicked drop down into a sub-menu. 现在，我试图将事件侦听器添加到li元素中，单击该元素时将其下拉到子菜单中。
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<nav>
<ul class="main-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Contact</a></li>
<li><a class="expandable" href="#">More ▾</a>
<!-- <ul class="sub-menu">
<li><a href="#">Tuts</a></li>
<li><a href="#">Codes</a></li>
<li><a href="#">Lectures</a></li>
</ul> -->
</li>
</ul>
</nav>
</div>
<script>
function expand() {
console.log(this);
/* Do something to display the drop down menu */
};
var anchor_arr = document.getElementsByClassName('expandable');
for(var i = 0; i<anchor_arr.length; i++) {
anchor_arr[i].addEventListener('click', expand, false);
}
</script>
</body>
</html>
As in above code, in the loop I'm adding the event Listener for click events on li elements with class expandable . 就像上面的代码一样，在循环中，我为类expandable li元素上的click事件添加了事件监听器。 But on clicking I get no output on the console. 但是单击时，控制台上没有任何输出。
Note: Solutions using Javascript only. 注意：仅使用Javascript的解决方案。
2 个解决方案
解决方案1
3 已采纳 2015-07-08 19:34:52
You can do this like this: 您可以这样做：
function expand() { if (this.parentNode.getElementsByTagName('ul')[0].style.display == 'block') { return this.parentNode.getElementsByTagName('ul')[0].style.display = 'none' } this.parentNode.getElementsByTagName('ul')[0].style.display = 'block' }; var anchor_arr = document.getElementsByClassName('expandable'); for(var i = 0; i<anchor_arr.length; i++) { anchor_arr[i].addEventListener('click', expand, false); }
<div class="wrapper"> <nav> <ul class="main-menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Jobs</a></li> <li><a href="#">Contact</a></li> <li><a class="expandable" href="#">More ▾</a> <ul class="sub-menu" style="display:none"> <li><a href="#">Tuts</a></li> <li><a href="#">Codes</a></li> <li><a href="#">Lectures</a></li> </ul> </li> </ul> </nav> </div>
Please note that I have added style="display:none" to the submenu ul . 请注意，我已经在子菜单ul添加了style="display:none" 。
解决方案2
0 2015-07-08 19:33:28
Either you need to move your " expandable " class to the " li " element, instead of the " a " element as it is now, or you can change this line: 您需要将“ expandable ”类移动到“ li ”元素，而不是现在的“ a ”元素，或者可以更改以下行：
anchor_arr[i].addEventListener('click', expand, false);
by this one: 通过这个：
anchor_arr[i].parentNode.addEventListener('click', expand, false);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.