如何使下拉菜單在一段時間後消失JavaScript

當鼠標懸停在標籤內的Section One上時，我有一個下拉菜單。我想知道如何讓JavaScript代碼重新檢查一段時間後列表再次處於什麼狀態，以便菜單關閉。誰能幫幫我嗎？如何使下拉菜單在一段時間後消失JavaScript

HTML

<div class = "sidebarwrap"> 
    <ul> 
     <li> 
     <a href="#" onmouseover="toggle(this); return true;" onmouseout="timer()">Section One</a> 
      <ul> 
       <li><a href="#" >link page</a></li> 
       <li><a href="#" >link page</a></li> 
       <li><a href="#" >link page</a></li> 
       <li><a href="#" >link page</a></li> 
      </ul> 
     </li> 
    </ul> 
    </div>

CSS

.sidebarwrap{ 
    width:auto; 
    height:auto; 
} 

.sidebarwrap ul{ 
    float:left; 
    display:block; 
    background:white; 
    padding:10px; 
    margin-right:30px; 
    margin-left:10px; 
    list-style-type:none; 
    border:1px dotted #0099CC; 
    border-radius:100px/10px; 
} 

.sidebarwrap ul ul{ 
    list-style-type:none; 
    display:none; 
    border:0px dotted #0099CC; 
    border-radius:20px/60px; 
} 

.sidebarwrap li li{ 
    list-style-type:circle; 
    border:0px dotted #0099CC; 
    border-radius:20px/60px; 
    padding:5px; 
}

的JavaScript

var cssNode = document.createElement('link'); 
cssNode.setAttribute('rel','stylesheet'); 
cssNode.setAttribute('type','text/css'); 
cssNode.setAttribute('href', 'javascript-overrides.css'); 
document.getElementsByTagName('head') [0].appendChild(cssNode); 


function toggle(toggler) { 

    if(document.getElementById){ 
     targetElement = toggler.nextSibling; 

     if(targetElement.className == undefined){ 
     targetElement = toggler.nextSibling.nextSibling; 
     } 

     if (targetElement.style.display == "block") 
     { 
     targetElement.style.display = "none"; 
     } 
     else 
     { 
     targetElement.style.display = "block"; 
     timer(); 
     } 
    } 
} 

function timer(){ 
    var Time = setTimeout(function(){toggle(toggler)},1000); 
}

來源

2013-12-17 user3087015

你可以做的jQuery使用.hover（）方法這一點。只需在頁面加載時綁定到鏈接即可。

$(document).ready(function() { 
    $("a").hover(function() { 
     $(this).next().slideDown(); 
    }, 
    function() { 
     $(this).next().delay(1000).slideUp(); 
    }); 
});

見工作示例：http://jsfiddle.net/WFN6q/

這裏是香草JS工作示例：

<ul> 
    <li> 
     <a href="#" onmouseover="showMenu(this)" onmouseout="hideMenu(this)">Section One </a> 
     <ul> 
      <li>text</li> 
      <li>text</li> 
      <li>text</li> 
      <li>text</li> 
     </ul> 
    </li> 
</ul>

通訊JS：

function showMenu(myLink) { 
     myLink.nextElementSibling.style.display = 'block'; 
    } 

    function hideMenu(myLink) { 
     var ulElem = myLink.nextElementSibling; 
     if (ulElement.style.display === 'block') { 
      setTimeout(function() { myLink.nextElementSibling.style.display = 'none' }, 1000); 
     } 
    }

來源

2013-12-17 23:13:31 Bic

雖然這可行，但您會遇到問題，嘗試點擊子菜單項，除非您很快。您可能需要爲mouseout事件添加其他邏輯，以處理用戶懸停在其中一個子菜單項上的情況。徘徊 – Bic

我建議像hoverIntent來處理。你可以自己寫，但爲什麼？這是一個小型圖書館，只有這樣做。 – Metagrapher

我喜歡這個答案，所以我將停止使用我的代碼，但是我想補充一點，你仍然想要設置一個全局obj來保存你的定時器，這樣你就不會有用戶在這個範圍內設置4個定時器1秒。 – Metagrapher

我注意到，在你的代碼，你有onmouseout設置爲調用timer（），這將創建一個無關的超時函數d沒有定義toggler。此外，您的代碼將無限期地追溯，每隔1000毫秒。

你應該定義一個全局的Timers變量來保存你的定時器引用。這種方式可以退出，你可以取消或以其他方式操作定時器。同樣，你可以在這裏實現一個Singleton模型，並防止你擁有許多定時器。

var Timers = {}; // create a Timers object to hold our timers. 
function timer(target){ 
    Timers.sectionOne = setTimeout(function(){ toggle(target); }, 1000); 
}

編輯：我會採取此除@Bic描述的方法，這是很好的優雅。

來源

2013-12-17 23:13:55 Metagrapher

如何使下拉菜單在一段時間後消失JavaScript

回答

相關問題