jQuery只隱藏div，如果沒有徘徊

我正在開發一個彈出式菜單，並遇到了一個小問題，我希望有人可以幫忙。彈出菜單彈出並在彈出窗口外單擊關閉它。這一切工作正常。jQuery只隱藏div，如果沒有徘徊

我的問題是將div設置爲在懸停時顯示，並在X秒後自動隱藏，除非用戶在時間框內懸停。這意味着彈出窗口會隱藏自身，除非需要。

任何人都可以建議嗎？我知道它會涉及setTimeout和clearTimeout，但我不確定如何在上下文中應用它們。

我此刻的代碼如下：

$('.links #links-schools a').bind('hover mouseenter', function() { 

    var school  = $(this).text(); 

    $('.links #links-schools a').each(function() { 
    $(this).removeClass("current-menu-item"); 
    }); 

    if(school == "Introduction") { 

    $('.sublinks ul').hide(); 
    $('.links #links-schools ul').removeClass('right-border'); 

    } else { 

    $(this).addClass("current-menu-item"); 

    var str  = $(this).parent().attr('class').slice(-3); 
    var editedstr = str.replace(/\D/g,""); 

    $('.links #links-schools ul').addClass("right-border"); 
    $('.sublinks ul').hide(); 
    $('.sublinks img').show(); 
    $('.sublinks').show(); 

    $.ajax({ 
     url: "http://www.bbdclients.com/sac-active-wp/buildnav.php", 
     type: "POST", 
     data: { parentschoolid: editedstr }, 
     dataType: 'text', 
     success: function(data) { 

     if (data.toLowerCase().indexOf("home") >= 0 || data.length < 1) { 
      $('.sublinks img').hide(); 
      $('.sublinks ul').hide(); 
      return false; 
     } 
     else { 
      $('.sublinks ul').html(data); 
      $('.sublinks img').hide(); 
      $('.sublinks ul').show(); 
     } 
     } 
    }); 

    } 

    return false; 
});

來源

2015-01-06 Graham

請提供一個jsfiddle :) – devqon

你可以這樣做：

$('.links #links-schools a').bind('hover mouseenter', function() { 
    var idTimeout; 

    // your code 

    idTimeout = setTimeout(function() { 
     $('#div-to-hide').hide(); 
    }, 5000); 

    $('#div-to-hide').on('mouseenter', function() { 
     clearTimeout(idTimeout); 
    }); 
});

給它一個嘗試，讓我知道的任何疑慮。

希望它有幫助！

來源

2015-01-06 13:19:54

感謝您的迴應！我在執行這段代碼時遇到了問題 - div仍然打開，但超時似乎沒有觸發？（順便說一下，我正確更新了＃div-to-hide。 – Graham

你還有問題的代碼嗎？如果你這樣做，請告訴我，如果你不這樣做，請接受它作爲答案:) –

它工作過的魅力，謝謝！我不確定如何接受它作爲答案？如果我愚蠢，沒有看到選項讓我知道，我會更新它:) – Graham

jQuery只隱藏div，如果沒有徘徊

回答

相關問題