jQuery Падение поведения при зависании

Question

С трудом получить эту информацию, чтобы правильно вести себя. Когда вы наводите указатель на элемент, который выпадает, он должен оставаться открытым. Я сделал функцию, которая каждые полсекунды проверяет, что ваша мышь зависает над этим элементом, и если это так, она ничего не делает, а если нет, она закрывает выпадающее меню. Вот мой Скрипки, чтобы увидеть, что я имею в виду: http://jsfiddle.net/KyCyB/

вот мой JS:

$('.navBarClickOrHover').mouseover(function() { 
    var targetDrop = $(this).attr('targetDropDown'); 
    if ($('.dropdownCont[isOpen="true"]').length != 0) { 
     $('.dropdownCont[isOpen="true"]').attr('isOpen', 'false'); 
     $('.dropdownCont[isOpen="true"]').animate({ 
      "height": "0px" 
     }, 200, function() { 
      $('#' + targetDrop).attr('isOpen', 'false'); 
      $('#' + targetDrop).animate({ 
       "height": "200px" 
      }); 
     }); 
    } else { 
     $('#' + targetDrop).animate({ 
      "height": "200px" 
     }); 
    } 
}).mouseout(function() { 
    var targetDrop = $(this).attr('targetDropDown'); 
    setTimeout(function() { 
     if ($('#' + targetDrop).attr('isHoveredOver') == 'true') { 
      //DONOTHING 
     } else { 
      $('#' + targetDrop).animate({ 
       "height": "0px" 
      }); 
     } 
    }, 500); 
}); 

$('.dropdownCont[isOpen="true"]').mouseover(function() { 
    $(this).attr('isHoveredOver', 'true'); 
}).mouseout(function() { 
    $(this).attr('isHoveredOver', 'false'); 
}); 

Я извиняюсь за длинный и повторяющегося кода, я собирался сделать его немного более объектно-ориентированный раз Я получил его, чтобы работать правильно, я просто продолжал возиться с ним, чтобы попытаться заставить его работать так, как я этого хочу. Определенно застрял. если вы пропустили ссылку раньше, вот это снова: http://jsfiddle.net/KyCyB/ Любая помощь или другой подход к этому будет потрясающим! Спасибо!

Answer 1

Вы можете сделать это с помощью CSS

Вот jsbin: http://jsbin.com/IsOFaJE/1/edit

Я также сделал версию, которая использует JavaScript для slidedown/вверх: http://jsbin.com/IsOFaJE/2/edit

Вот HTML:

<div> 
    title 
    <ul> 
     <li>menuitem</li> 
     <li>menuitem</li> 
     <li>menuitem</li> 
    </ul> 
</div> 

Вот css:

ul {display: none; } 
div:hover ul, 
ul:hover { 
    display: block; 
} 

Answer 2

Примерно через 30 минут или около того, я стер весь код и начал новую стратегию, это то, что я придумал, и это работает прекрасно:

$('.navBarClickOrHover').mouseenter(function(){ 
      var targetDropDown = $(this).attr('targetDropDown'); 
      $('.dropdownCont').each(function(){ 
       $(this).css({ 
        "height":"0px" 
       }); 
      }); 
      setTimeout(function(){ 
       $('#'+targetDropDown).animate({ 
        "height":"200px" 
       }); 
      },500) 

     }).mouseleave(function(){ 
      var targetDropDown = $(this).attr('targetDropDown'); 
      if($("#wrapper").find("#"+targetDropDown+":hover").length == 0){ 
       $('.dropdownCont').each(function(){ 
        $(this).animate({ 
         "height":"0px" 
        }); 
       }); 
      } 
      else{ 
       $('#'+targetDropDown).bind('mouseleave', checkIfHoveredFunc); 
      } 
     }); 

     var checkIfHoveredFunc = function(){ 

      $('.dropdownCont').each(function(){ 
       $(this).animate({ 
        "height":"0px" 
       }); 
      }); 

     }