Heim > Web-Frontend > js-Tutorial > Hauptteil

ClearTimeout, um flackernde Beispielcode_javascript-Fähigkeiten zu beseitigen

WBOY
Freigeben: 2016-05-16 15:13:02
Original
1298 Leute haben es durchsucht

Definition und Verwendung

Die Methode „clearTimeout()“ kann das von der Methode „setTimeout()“ festgelegte Zeitlimit aufheben.

Grammatik

clearTimeout(id_of_settimeout)
Nach dem Login kopieren

参数 描述
id_of_settimeout 由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

Voraussetzung: Wenn die Maus auf dem übergeordneten Menü platziert wird, wird das Untermenü darunter angezeigt. Wenn sich die Maus vom Untermenü oder übergeordneten Menü wegbewegt, sollte das Untermenü ausgeblendet sein. Der endgültige Effekt ist wie folgt:

PS: Diese Anforderung kommt sehr häufig vor. Der häufigste Ansatz besteht darin, ein Ul-Element unter dem li-Element zu verschachteln, um die untergeordneten Elemente aufzunehmen. Dieser Ansatz kann vollständig mit CSS gesteuert werden. Aber heute sind dieses Untermenü und die Navigationsleiste getrennt. Das heißt, der Header-Tags-Block wird angezeigt, wenn sich die Maus über dem Produkt befindet.

<ul class="header-nav">
<li class="nav-item home"><a href="@Url.Action("Index", "Home")">首页</a></li>
<li class="nav-item products" id="header_tags">
<a href="#">产品<span class="icon-caret-down"></span></a>
....
</li>
</ul>
<div class="header-tags">
<ul>
<li>
<img class="screening-img-normal" src="~/Content/static/all.png">
<img class="screening-img-hover" src="~/Content/static/all1.png">
<p>全部</p>
</li>
<li tagid="4">
<img class="screening-img-normal" src="~/Content/static/shafa.png">
<img class="screening-img-hover" src="~/Content/static/shafa1.png">
<p>沙发</p>
</li>
<li tagid="3">
<img class="screening-img-normal" src="~/Content/static/zuoyi.png">
<img class="screening-img-hover" src="~/Content/static/zuoyi1.png">
<p>座椅</p>
</li>
....
</div> 
Nach dem Login kopieren

Dies kann nicht vollständig mit CSS gesteuert werden (Hover kann nur untergeordnete Elemente oder Geschwisterelemente steuern).

/*父子*/
#a:hover #b{display: block} 
/*兄弟*/
#a:hover + #b{display: block} 
Nach dem Login kopieren

Die obige Situation erfordert die Verwendung von Skripten. Dies beinhaltet das Ein- und Auswechseln der beiden Elemente #header_tags und .header-tags. Wenn sich die Maus in #header_tags bewegt, werden .header-tags angezeigt. Wenn sich die Maus in .header-tags bewegt, kann das Moveout-Ereignis von #header_tags nicht sofort ausgelöst werden, die Tags müssen jedoch weiterhin angezeigt werden. Das Untermenü wird erst geschlossen, wenn die Maus #header_tags und .header-tags verlässt und nicht wieder hineingeht.

$(function () {
var tagsTime;
$(document).on('mouseover mouseout', '#header_tags', function(event){
var $headerTagsBox = $('.header-tags');
if (event.type == 'mouseover') {
clearTimeout(tagsTime);
$headerTagsBox.slideDown(300);
}
else if (event.type == 'mouseout') {
tagsTime = setTimeout(function(){
$headerTagsBox.slideUp(200);
}, 200);
}
});
$('.header-tags').hover(function(){
clearTimeout(tagsTime);
},function(){
var $me = $(this);
tagsTime = setTimeout(function(){
$me.slideUp(200);
}, 200);
}); });
Nach dem Login kopieren

Wenn der Timer nicht gelöscht und keine verzögerte Ausführung hinzugefügt wird, blinkt die Navigationsleiste weiter. Kann überhaupt nicht klicken.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage