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

How to handle adding a close link within an UL/LI item

本文关键字：LI 添加 链接 UL 何处理 处理      更新时间：2023-09-26

我有一些代码，像这样:

<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就显示出来了。现在我尝试了一下，当你"取消悬停"的时候，div就会消失，但是用户体验并不友好……太多的闪烁。

所以我决定添加一个闭合的超链接…但是如果我将它添加到li项中并单击它，div会重新出现，因为我仍然"悬停"在li内。如何处理这个问题，以便允许用户关闭div?

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

尝试使用。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();
});

演示:小提琴

相关文章：