html - 使 div 内的 span 元素可点击

Question

我有一个使用 javascript 的下拉列表。在我的 div 中，我有一个带有 div 文本的 span 元素，因为我想根据屏幕大小显示/隐藏文本。当我添加跨度元素时，跨度区域不可点击。该 div 中的其他部分是可单击的并显示菜单，但具有跨度的区域除外。如何使跨度也可点击？

这是我的代码:

<div onclick="dropDownFunction()" class="dropbtn"><span>My List &nbsp;</span> <i class="fa fa-arrow-circle-down" aria-hidden="true"></i></div>

还有我的代码笔:http://codepen.io/nfds89/pen/MyLGKR

Answer 1

更改代码中的以下行:

if (!event.target.matches('.dropbtn')) {

下面一行:

if (!event.target.matches('.dropbtn, .dropbtn span, .dropbtn i')) {

我刚刚添加了, .dropbtn span, .dropbtn i。