Javascript 将事件侦听器添加到<；李>；元素_Javascript

Javascript 将事件侦听器添加到<；李>；元素

javascript

Javascript 将事件侦听器添加到<；李>；元素,javascript,Javascript,我正在尝试使用CSS+JavaScript制作一个简单的下拉菜单。我得到了CSS部分现在，我正在尝试将事件侦听器添加到li元素中，当单击这些元素时，它们会下拉到子菜单中 <html> <head> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrapper">

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










函数展开（）{
console.log（this）；
/*执行一些操作以显示下拉菜单*/
};
var anchor_arr=document.getElementsByClassName（'expandable'）；
对于（var i=0；i您需要将“expandable
”类移动到“li
”元素，而不是现在的“a
”元素，或者您可以更改此行：
anchor_arr[i].addEventListener('click', expand, false);

通过这个：
anchor_arr[i].parentNode.addEventListener('click', expand, false);

您可以这样做：

函数展开（）{
if（this.parentNode.getElementsByTagName（'ul'）[0].style.display=='block'）{
返回此.parentNode.getElementsByTagName（'ul'）[0]。style.display='none'
}
this.parentNode.getElementsByTagName（'ul'）[0]。style.display='block'
};
var anchor_arr=document.getElementsByClassName（'expandable'）；
对于（var i=0；i











在这里工作正常代码中没有类为可扩展的元素的li
元素。该类位于li
元素内部的链接上。我觉得一切正常。在控制台中，它返回元素本身，而不仅仅是文本，因此您可能忽略了它。他正在寻找将事件附加到expand的子元素@我不这么认为。他的问题是“将事件侦听器添加到元素”。