Question

我有一些像这样的代码：

<ul id="ulPersonal">
      <li class="break eTime">
        <p>Manage your time card.</p>
        <div id="dEtime">
          some content
        </div>
       </li>
</ul>

div只有在jquery：{/ p>上的li项目之后才会出现

    $('#dEtime').hide(); //initially hide the div...

    //when the user hovers show the div
    $(".eTime").hover(function () {
        $('#dEtime').fadeIn('slow');
    });

所以基本上页面显示了li项目，我将其移动并显示div。现在我试了一下，这样当你“徘徊”离开时，那个div消失了，但是UX并不友好......太闪烁了。

所以我决定添加一个关闭的超链接......但是如果我在li项目中添加它并点击它，那么div会重新出现，因为我仍在“悬停”在li里面。我该如何处理这个以便我可以让用户关闭div？

我有很多单独的ul项目，所以我不想在ul之后添加关闭链接，显然我不能只在一个href之外添加一个{{1}}标签李，因为这是完全错误的。

Answer 1

尝试使用.mouseenter()代替.hover()，因为由于您只将一个回调传递给.hover()，因此将同时调用鼠标进入和离开条件

$('#dEtime').hide(); //initially hide the div...
$('#closeIt').hide(); //initially hide the div...

//when the user hovers show the div
$(".eTime").mouseenter(function () {
    $('#dEtime').fadeIn('slow');
    $('#closeIt').show(); //initially hide the div...
});

$("#closeIt").click( function(){
    $('#dEtime').hide(); //initially hide the div...
    $('#closeIt').hide();
});

演示：Fiddle

如何处理在UL / LI项目中添加关闭链接

1 个答案: