Как обрабатывать добавления тесной связи внутри элемента 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 элементов, которые делают это, так что я не хочу, чтобы добавить тесную связь после ул, и, очевидно, я не могу просто добавить href тег вне из Li, так как это просто неправильно.

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