使div中的span元素可点击 [英] Make the span element inside div clickable

问题描述

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

这是我的代码:

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

我的代码笔:

I have a dropdown list using javascript. Inside my div I have a span element with the text for the div, because I want to show/hide the text according to the screen size. As I added the span element the span area is not clickable. Other parts in that div are clickable and show the menu, except for the area with the span. How to make the span clickable as well?

Here's my code:

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

And my codepen: http://codepen.io/nfds89/pen/MyLGKR

解决方案

An alternate CSS-only solution is to pass through clicks on the <span> and <i>

.dropbtn span,
.dropbtn i {
  pointer-events: none;
}

这篇关于使div中的span元素可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！