ClearTimeout untuk menghapuskan kemahiran code_javascript contoh berkelip

Takrif dan penggunaan

Kaedah clearTimeout() boleh membatalkan tamat masa yang ditetapkan oleh kaedah setTimeout().

Tatabahasa

clearTimeout(id_of_settimeout)

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

Keperluan: Apabila tetikus diletakkan pada menu induk, submenu di bawah dipaparkan. Apabila tetikus bergerak dari submenu atau menu induk, submenu harus diruntuhkan. Kesan akhir adalah seperti berikut:

PS: Keperluan ini sangat biasa Pendekatan yang paling biasa adalah untuk menyarangkan elemen Ul di bawah elemen li untuk mengandungi elemen anak. Pendekatan ini boleh dikawal sepenuhnya menggunakan css. Tetapi hari ini submenu dan bar navigasi ini berasingan. Iaitu, blok tag pengepala dipaparkan apabila tetikus berada di atas produk.

<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 lazy"  src="/static/imghwm/default1.png"  data-src="~/Content/static/all.png"  alt="ClearTimeout untuk menghapuskan kemahiran code_javascript contoh berkelip" >
<img  class="screening-img-hover lazy"  src="/static/imghwm/default1.png"  data-src="~/Content/static/all1.png"  alt="ClearTimeout untuk menghapuskan kemahiran code_javascript contoh berkelip" >
<p>全部</p>
</li>
<li tagid="4">
<img  class="screening-img-normal lazy"  src="/static/imghwm/default1.png"  data-src="~/Content/static/shafa.png"  alt="ClearTimeout untuk menghapuskan kemahiran code_javascript contoh berkelip" >
<img  class="screening-img-hover lazy"  src="/static/imghwm/default1.png"  data-src="~/Content/static/shafa1.png"  alt="ClearTimeout untuk menghapuskan kemahiran code_javascript contoh berkelip" >
<p>沙发</p>
</li>
<li tagid="3">
<img  class="screening-img-normal lazy"  src="/static/imghwm/default1.png"  data-src="~/Content/static/zuoyi.png"  alt="ClearTimeout untuk menghapuskan kemahiran code_javascript contoh berkelip" >
<img  class="screening-img-hover lazy"  src="/static/imghwm/default1.png"  data-src="~/Content/static/zuoyi1.png"  alt="ClearTimeout untuk menghapuskan kemahiran code_javascript contoh berkelip" >
<p>座椅</p>
</li>
....
</div> 

Ini tidak boleh dikawal sepenuhnya dengan css (legar hanya boleh mengawal elemen kanak-kanak atau unsur adik beradik).

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

Situasi di atas memerlukan penggunaan skrip. Ini melibatkan pergerakan masuk dan keluar daripada dua elemen #header_tags dan .header-tags. Apabila tetikus bergerak ke dalam #header_tags, .header-tags dipaparkan Apabila tetikus bergerak ke .header-tags, peristiwa perpindahan #header_tags tidak boleh dicetuskan serta-merta, tetapi teg mesti terus dipaparkan. Submenu akan ditutup hanya selepas tetikus meninggalkan #header_tags dan .header-tags dan tidak masuk lagi.

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

Jika pemasa tidak dikosongkan dan pelaksanaan tertunda tidak ditambahkan, bar navigasi akan terus berkelip. Tidak boleh klik langsung.