Hinzufügen von setTimeout UL-Menü mit JavaScript

Question

Ich versuche, eine Verzögerung zu einem Dropdown-Menü hinzuzufügen. Ich möchte, dass das Menü etwa zwei Sekunden lang sichtbar bleibt, nachdem sich der Cursor von ihm wegbewegt hat. Hier ist ein Beispiel für meinen HTML-Code.

<ul class="select"> 
    <li><a><b>Home</b></a></li> 
    <li><a><b>Accommodation</b></a> 
    <ul class="sub"> 
     <li><a>Hotels</a></li> 
     <li><a>Luxury Villas</a></li> 
     <li><a>Apartments</a></li> 
     <li><a>Hostels</a></li> 
    </ul> 
    </li> 
</ul> 

Hier ist die CSS, die ich benutze.

nav {

height:30px; 
width: 904px; 
position:relative; 
font-family:arial, verdana, sans-serif; 
font-size:13px; 
z-index:500; 
background-color: #666; 
background: url(../images/sub-nav_04.jpg); 

}

nav .select {

margin: 0; Auffüllen: 0; Listenart: keine; Leerzeichen: nowrap; }

nav li {

float:left; 

}

nav .select a {

display:block; 
height:30px; 
float:left; 
text-decoration:none; 
line-height:30px; 
white-space:nowrap; 
color:#333; 
border-right-width: 1px; 
border-right-style: dotted; 
border-right-color: #666; 
padding-right: 0; 
padding-left: 15px; 
margin-top: 0px; 
margin-bottom: 0px; 

}

nav .select1 eine {

height: 30px; 
line-height:30px; 
cursor:pointer; 
color:#fff; 
background-color: #006; 
background-image: url(../images/sub-nav2.jpg); 

}

nav .select einem b {

display: block; Auffüllen: 0 30px 0px 15px; }

nav .select li: hover a {

height: 30px; 
line-height:30px; 
cursor:pointer; 
color:#fff; 
background-color: #006; 
background-image: url(../images/sub-nav2.jpg); 
z-index: 2000; 

}

nav .select li: hover ab {

display:block; 
cursor:pointer; 
padding-top: 0; 
padding-right: 30px; 
padding-bottom: 0px; 
padding-left: 15px; 
z-index: 2000; 

}

nav .sub {

Anzeige: keine; Rand: 0; padding: 0 0 0 0; Listenart: keine; Hintergrundfarbe: # 006; }

nav .sub- li {background-color: # 006;}

nav .select li: schweben .sub- {

Höhe: 30px; Bildschirmsperre; Position: absolut; schweben: links; Breite: 904px; oben: 28px; links: 0; Textausrichtung: Mitte; Hintergrundfarbe: # 006; Hintergrund: URL (../ images/sub-nav2.jpg); Z-Index: 980; }

nav .select li: .sub li a {

display:block; 
height:30px; 
line-height:30px; 
float:left; 
white-space:nowrap; 
color: #FFF; 
font-size:12px; 
font-weight: bold; 
border-top-width: 0px; 
border-right-width: 1px; 
border-bottom-width: 0px; 
border-left-width: 0px; 
border-right-style: dotted; 
border-right-color: #666; 
padding-right: 16px; 
padding-left: 16px; 
margin-right: 0; 
margin-bottom: 0; 
margin-left: 7; 
z-index: 1000; 

}

nav .select li schweben: schweben.Unterli a: Hover {

Farbe: # 000; Hintergrund: #fff; Rand oben: 0px; Zeilenhöhe: 30px; Höhe: 30px; Hintergrund: URL (../ images/sub-nav3.jpg); Z-Index: 990; }

Answer 1

A (sorta) gutes Beispiel hierfür kann here

var hideDelayTimer = null; 
$('.select').mouseenter(function() { 
    $(this).children('.sub').slideDown().mousenter(function() { 
    if (hideDelayTimer) clearTimeout(hideDelayTimer); 
    }).mouseleave(function() { 
    if (hideDelayTimer) clearTimeout(hideDelayTimer); 
    hideDelayTimer = setTimeout(function() { 
     hideDelayTimer = null; 
     $(this).slideUp(); 
    }, 2 * 1000); 
    }); 
}); 

Wenn Sie mit der Positionierung etwas Hilfe benötigen finden Sie so etwas tun könnte:

$('.sub').each(function() { 
    var parent = $(this).parent(); 
    var parentOffset = parent.offset(); 
    $(this).css({ 
    left: parentOffset.left + parent.width(), 
    top: parentOffset.top 
    }); 
});