发生这种情况是因为作为 div 元素的下划线元素与相关元素重叠。如您所知div
,是块级元素。
一种解决方法是将 2 个 div 设置为inline-block
._tlh_dropdown_input_container, ._tlh_dropdown{
display: inline-block;
}
检查小提琴悬停
如果您希望div
它是块级别,那么您也可以使用 z-index
._tlh_dropdown_close_button{
z-index: 1;
}
这将确保关闭的 div 始终位于底层容器的顶部
更新
页面上的每个点击事件都会触发 2 个事件。
因此,由于这种情况,当您单击图像时不会显示内容
if ($targ.hasClass('_tlh_dropdown')
|| $targ.closest('._tlh_dropdown_content').length)
return;
发生这种情况是因为e.target
当您单击箭头图像时将是箭头而不是tlh_dropdown
.. 所以它在这种情况下失败并移至删除内容的下一条语句。
更改
if ($targ.hasClass('_tlh_dropdown')
|| $targ.closest('._tlh_dropdown').length
|| $targ.closest('._tlh_dropdown_content').length)
return;
它应该工作..
检查小提琴
我也觉得同样可以用更少的代码来完成。您始终可以拥有HTML
已构建的内容,然后根据条件隐藏或显示。