將事件偵聽器添加到 <li> 分子
[英]Adding Event Listeners to <li> elements
問題描述
我正在嘗試使用CSS + JavaScript創建一個簡單的下拉菜單。 我得到了CSS部分。
現在，我試圖將事件偵聽器添加到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>
就像上面的代碼一樣，在循環中，我為類expandable li元素上的click事件添加了事件監聽器。 但是單擊時，控制台上沒有任何輸出。
注意：僅使用Javascript的解決方案。
2 個解決方案
解決方案1
3 已采納 2015-07-08 19:34:52
您可以這樣做：
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>
請注意，我已經在子菜單ul添加了style="display:none" 。
解決方案2
0 2015-07-08 19:33:28
您需要將“ expandable ”類移動到“ li ”元素，而不是現在的“ a ”元素，或者可以更改以下行：
anchor_arr[i].addEventListener('click', expand, false);
通過這個：
anchor_arr[i].parentNode.addEventListener('click', expand, false);
將事件偵聽器添加到 <li> 使用javascript創建的
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.