Question

我正在尝试使用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>

与上面的代码一样，在循环中，我在li元素的类expandable上为点击事件添加事件监听器。但点击后我在控制台上没有输出。

注意：仅使用Javascript的解决方案。

Answer 1

你可以这样做：

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

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

Answer 2

您需要将“expandable”类移动到“li”元素，而不是现在的“a”元素，或者您可以更改此行：

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

这一个：

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

将事件侦听器添加到<li>元素

2 个答案: