JQuery выпадаете вниз, оставайтесь внизу, а наведите указатель мыши вниз.

Question

Я настраиваю выпадающее меню jquery, которое отлично работает. Он падает, когда пользователь перекатывается по ссылке. Проблема заключается в том, что когда пользователь перекатывается над областью содержимого выпадающего меню, он возвращается назад. Мне нужно настроить код так, чтобы окно слайдинга оставалось в нижнем положении, пока курсор пользователя все еще находится над ним.

Вот мой HTML:

<ul id="tabnav"> 
<li class="tab2"><a href="index2.html" class="btn-slide">My Leases</a></li> 
</ul> 

<div id="leases"> 
<!-- slide down content here --> 
</div> 

JS Trigger:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".btn-slide").hover(function(){ 
    $("#leases").slideToggle("medium"); 
    $(this).toggleClass("active"); 
    return false; 
    }); 
}); 
</script> 

Любые идеи?

EDIT: Вот ссылка на страницу в вопрос: http://designvillain.com/testbed/600/601.html

Answer 1

Я не уверен, что это то, что вы хотите, но я просто отправлю его сюда. Он ждет 500мс перед тем скользя #leases, и только в случае необходимости

var isMousedOver; 

var hideDropdown = function(a) { 
     setTimeout(function() { 
      if (isMousedOver) return; 
      $("#leases").slideUp("medium"); 
      $(a).removeClass("active"); 
     }, 500); 
} 

$(".btn-slide").hover(
    function(){ 
     $("#leases").stop(true,true).slideDown("medium"); 
     isMousedOver = true; 
     $(".btn-slide").removeClass("active"); 
     $(this).addClass("active"); 
     var that = this; 
     $("#leases").data("mouseoutfn", function() { hideDropdown(that) }); 
    }, 
    function(){ 
     isMousedOver = false; 
     hideDropdown(this); 
    } 
); 

$("#leases").hover(
    function() { 
     isMousedOver = true; 
    }, 
    function() { 
     isMousedOver = false; 
     $(this).data("mouseoutfn")(); 
    } 
); 

Вот демо: http://jsfiddle.net/mMRZc/

Answer 2

.hover() связывает два события, MouseEnter и MouseLeave.

Я бы вместо того, чтобы идти гранулированным и использовать MouseEnter() на .btn горке и MouseLeave() на .leases

$(function() 
{  
    $(".btn-slide").mouseenter(function(){ 
     $("#leases").slideToggle("medium"); 
     $(this).toggleClass("active"); 
    }); 
    $("#leases").mouseleave(function(){ 
     $(".btn-slide").toggleClass("active"); 
     $(this).slideToggle("medium"); 
    }); 
}); 

EDIT: Обратите внимание, что если мышь никогда не входит в #leases DIV , он не получит мышь, и вам, возможно, придется это учитывать.

EDIT2: исправить мой плохой палец типирование Funciton функционировать

Answer 3

Я предполагаю, что DIV скрыт на странице загрузки, и вы хотите, чтобы показать, когда вы наведите курсор мыши на ссылку? Изменить переключиться на ...

$(document).ready(function(){ 
$("#leases").hide(); 
$(".btn-slide").hover(function(){ 
    $("#leases").slideDown("medium"); 
    $(this).toggleClass("active"); 
return false; 
}); 
}); 

Нужно ли когда-нибудь сползать назад?