How to make dropdown menu disappear after a certain amount of time JavaScript

Question

I have a side menu that drops down when you hover over the Section One within the tag. I want to know how to get the JavaScript code to repeat itself to check what state the list is in again after a certain amount of time so that the menu closes. Can anyone please help me?

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);
}

Answer 1

You can do this using the .hover() method in jQuery. Just bind to the link when the page loads.

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

See working example: http://jsfiddle.net/WFN6q/

Here is a working example in Vanilla 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>

Corresponding 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);
        }
    }

Answer 2

I noticed that in your code, you have onmouseout set to call timer(), which will create an extraneous timeout function that does not have toggler defined. Further, your code will recourse indefinitely, ~every 1000ms.

You should define a global Timers variable to hold your timer references. That way this function can exit and you can cancel or otherwise manipulate the timer. As well, you can implement a Singleton model here and prevent you from having many many timers.

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

EDIT: I'd take this in addition to the method @Bic described, which is nicely elegant.