向< light >添加事件侦听器元素

Adding Event Listeners to <li> elements

本文关键字：侦听器 事件 元素 添加 light      更新时间：2023-09-26

我试图使用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 &#x25BE;</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元素上的单击事件添加了事件侦听器。但是点击后，控制台没有输出。

你可以这样做:

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 &#x25BE;</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>

请注意，我已将style="display:none"添加到ul子菜单中。

要么你需要移动你的" expandable "类到" li "元素，而不是" a "元素，因为它是现在，或者你可以改变这一行:

anchor_arr[i].addEventListener('click', expand, false);

:

anchor_arr[i].parentNode.addEventListener('click', expand, false);
相关文章：