JQuery парения событие с вложенными элементами

Question

В настоящее время я получил свое основное, заурядного дерево меню следующим образом:

<ul id="nav"> 
    <li> 
    <a href="#">home</a> 
    <div class="controls">Some controls go here</div> 
    <ul> 
     <li> 
     <a href="#">item 1</a> 
     <div class="controls">Some controls go here</div> 
     </li> 
     <li> 
     <a href="#">item 2</a> 
     <div class="controls">Some controls go here</div> 
     </li> 
    </ul> 
    </li> 
</ul> 

дива с классом «управления» скрыто, чтобы начать с. То, что я хочу, это то, что когда вы наводите курсор мыши на li, элементы управления для этого соответствующего шоу li (когда вы перемещаете мышь, они снова скрываются). Проблема возникает, когда вы наводите курсор мыши на один из вложенных файлов li, это отображает и его родители. Вот jQuery, который я использую:

$("#nav li").hover(
     function() { 
      $(".controls:first", this).css("display", "block"); 
     }, 
     function() { 
      $(".controls:first", this).css("display", "none"); 
     } 
    ); 

Спасибо за вашу помощь. Remy

Answer 1

Вы можете сделать это без js, хотя вам понадобится js для ie6.

что-то подобное может работать:

$(this).children('div').css("display", "block"); 

или даже:

$(this).children('div').show(); 

Вот это "является ли.

Answer 2

Попробуйте остановить распространение события в функции наведения, чтобы предотвратить событие от пузырьков до родителя. Вы также можете посмотреть плагин hoverIntent, чтобы решить проблемы «мигающих» эффектов зависания, если ваши «зависающие» элементы находятся близко друг к другу.

$("#nav li").hover(
    function(e) { 
      e.stopPropagation(); 
      $(".controls:first", this).css("display", "block"); 
     }, 
     function() { 
      $(".controls:first", this).css("display", "none"); 
     } 
);