Я установил 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>

Любые идеи?

РЕДАКТИРОВАТЬ: Вот ссылка на соответствующую страницу: http://designvillain.com/testbed/600 /601.html

1
Thomas 15 Июл 2010 в 18:57

3 ответа

Лучший ответ

Я не уверен, что это то, что вы хотите, но я просто оставлю это здесь. Он ждет 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/

2
Simen Echholt 15 Июл 2010 в 16:45

.Hover () связывает два события, mouseenter и mouseleave.

Я бы вместо этого пошел гранулярно и использовал mouseenter () на .btn-slide и mouseleave () на .leases

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

РЕДАКТИРОВАТЬ: Обратите внимание, что если мышь никогда не входит в div #leases, она не получит отпуск мыши, и вам, возможно, придется учесть это.

РЕДАКТИРОВАТЬ 2: исправить мой плохой палец ввода функции, чтобы функционировать

2
Mark Schultheiss 15 Июл 2010 в 16:36

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

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

Нужно ли когда-нибудь скользить вверх?

0
Capt Otis 15 Июл 2010 в 15:14