Проблемы с реализацией setTimeout в навигационном меню jquery с вложенными подменю - PullRequest
Новая
       28

Проблемы с реализацией setTimeout в навигационном меню jquery с вложенными подменю

1 голос
/ 11 декабря 2011

У меня есть список меню с подменю, которые не вложены в стилизацию. Таким образом, я использую mouseenter и mouseleave вместе с settimeout для поведения зависания.

Вот мой HTML: 

<li class="dropdown"><a href="#">Link 1</a></li>
<div class="subnav">
<ul>
<li><a href="#">Link 1.1</a></li>
<li><a href="#">Link 1.2</a></li>
<li><a href="#">Link 1.3</a></li>  
<li><a href="#">Link 1.4</a></li>  
    </ul>
</div>

<li class="dropdown"><a href="#">Link 2</a></li>
<div class="subnav">
<ul>
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>  
<li><a href="#">Link 2.4</a></li>  
    </ul>
</div> 

<li class="dropdown"><a href="#">Link 3</a></li>
<div class="subnav">
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<li><a href="#">Link 3.3</a></li>  
<li><a href="#">Link 3.4</a></li>  
    </ul>
</div> 

</ul>
</div><!-- End topNav -->

И мой JQuery: 

$(document).ready(function(){  

var overSubmenuFlag = false;
var timeout;
var subnav;
var offset;

$("li.dropdown").mouseenter(function(){

    clearTimeout(timeout);
    $(".subnav").hide();

    $(this).children('a').addClass("active"); //Add active class to link element

    var subnav = $(this).next("div.subnav"); //find navigation box associated with this nav tab
    var offset = $(this).position(); //Position subnav relative to nav tab
    var leftpos = (offset.left + 15) + "px";
    var toppos = (offset.top + 36) + "px";
    subnav.css( { 
        position: 'absolute',
        left: leftpos, 
        top: toppos
    });

    subnav.show(); //Reveal subnav

}).mouseleave(function() {
    clearTimeout(timeout);
    var timeout = setTimeout(function() {
        if(!overSubmenuFlag) {
            var subnav = $("li.dropdown").next("div.subnav");
            subnav.hide();
            $("li.dropdown").children('a').removeClass("active");       
        }},100);        
});
$(".subnav").mouseenter(function(){
    clearTimeout(timeout);
    overSubmenuFlag = true;  
}).mouseleave(function(){   
    overSubmenuFlag = false; 
    $(".subnav").hide();
    $("li.dropdown").children('a').removeClass("active");       
}); 
});

Все работает как задумано, за исключением следующего: когда я наведите курсор мыши на один заголовок навигации и быстро наведу курсор мыши на другой заголовок, кратковременно появится подменю, связанное с новым заголовком, а затем исчезнет. (Медленное наведение между двумя заголовками навигации работает правильно). Как правильно остановить все действия, связанные с функцией setTimeout (и закрыть все открытые подменю) при входе в новую навигацию. заголовок? Большое спасибо за любую помощь!

1 Ответ

0 голосов
/ 21 декабря 2011

Это ваша проблема?

}).mouseleave(function() {
    clearTimeout(timeout);
    var timeout = setTimeout(function() {
    ^^^
...