3

我正在尝试将点击事件附加到几个 div。其中一个没有高度或宽度，只有边框。也许它只是浏览器，但点击的触发非常不可靠。甚至 css 参数.class:hover{}也没有真正起作用。

$("body").on("click", "._tlh_dropdown, ._tlh_dropdown *", function (event) {

单击包含的 div 时不起作用._tlh_dropdown。并且._tlh_dropdown_close_buttondiv 在单击时不会删除它的父 div，当它悬停时也不会变成更深的灰色阴影。我在这里做错了什么？我认为这与单击事件未应用于“只是填充”的 div 区域有关。是这样吗？我该如何克服呢？

http://jsfiddle.net/UrNUM/7/

4

2 回答 2

1

发生这种情况是因为作为 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已构建的内容，然后根据条件隐藏或显示。

于 2013-07-17T00:09:59.197 回答
0

关于关闭按钮，如果您将“_tlh_dropdown_input_container”悬停在检查器中，您可以看到它与 X 按钮的底部重叠。这就是为什么 X 上的悬停/单击事件没有被捕获到它的中间下方。

关于向下箭头，只需将其与另一个 DIV 包装在一起，您将在该 DIV 上添加事件。您可以通过使用单个 DIV 并使用 CSS :before 或 :after 向其中添加箭头来实现最小的 HTML。

于 2013-07-17T00:09:01.927 回答