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

Question

我有一些像这样的代码：

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

div 仅在您将鼠标悬停在li项目上时出现，在 jquery 中：

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

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

所以基本上页面显示了 li 项目，我将鼠标悬停在它上面并显示了 div。现在我尝试了，这样当你“悬停”离开 li 时，div 就会消失，但是 UX 并不友好……闪烁太多。

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

我有很多单独的ul项目可以做到这一点，所以我不想在 ul 之后添加关闭链接，显然我不能只在hrefli 之外添加标签，因为那是完全错误的。

Answer 1

Try to use .mouseenter() instead of .hover() because since you are passing only one callback to .hover() it will be called for both mouse enter and leaving conditions

$('#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();
});

Demo: Fiddle