[英]jquery fast hover issue
我有一個側邊欄有問題。 問題是,當我將鼠標懸停在側邊欄上時,它會正常工作,但是當我快速移動鼠標時,它會變得混亂。 我該怎么辦呢?
這是我的HTML:
<div class="sidebar">
<ul class="insidenav">
<li class="purple">
<a href="" class="link purple"><span>ابر پژوهیار</span></a>
<ul style="display: none;" class="insidenavsubmenu">
<li><a href="">کتابخانه من</a></li>
<li><a target="_blank" href="">اطلاعات کاربر</a></li>
<li><a href="">مشخصات کاربر</a></li>
<li><a href="">اطلاعات حساب</a></li>
<li><a target="_blank" href="">تغیر کلمه عبور</a></li>
<li><a href="">خروج</a></li>
</ul>
</li>
<li class="green">
<a href="" class="link green">
<span>فرادادههای موضوعی</span>
</a>
</li>
<li class="blue">
<a href="" class="link blue">
<span>استناددهی آنلاین</span>
</a>
</li>
<li class="darkorange">
<a class="link darkorange"><span>دانشنامه استناددهی</span></a>
<ul style="display: none;" class="insidenavsubmenu">
<li><a href="">همزمانسازی</a></li>
<li><a href="">شیوه نگارش مقاله</a></li>
<li><a href="">شیوه نگارش پایان نامه</a></li>
<li><a href="">استناددهی</a></li>
<li><a href="">بیشتر بدانیم...</a></li>
<li><a href="">مثال های استناددهی</a></li>
</ul>
</li>
<li class="orange">
<a href="" class="link orange"><span>خرید آنلاین</span></a>
<ul style="display: none;" class="insidenavsubmenu">
<li><a target="_blank" href="">خرید و دریافت پستی</a></li>
<li><a href="">خرید و دریافت آنلاین</a></li>
<li><a target="_blank" href="">خرید «پژوهیار» از دیجیکالا</a></li>
</ul>
</li>
<li class="red">
<a class="link red"><span>کارگاههای آموزشی</span></a>
<ul style="display: none;" class="insidenavsubmenu">
<li><a href="">کارگاههای آموزشی برگزار شده</a></li>
<li><a href="">شرایط کارگاههای آموزشی</a></li>
<li>
<a>ثبت نام</a>
<ul class="dubinsidenavsubmenu">
<li><a href="">فرم ثبت نام تربیت مدرس</a></li>
<li><a href="">فرم ثبت نام کارگاه سازمانی</a></li>
<li><a href="">فرم ثبت نام کارگاه عمومی</a></li>
</ul>
</li>
</ul>
</li>
<li class="lightgreen">
<a class="link lightgreen"><span>شبکه مدرسان</span></a>
<ul style="display: none;" class="insidenavsubmenu">
<li><a href="">استانهای فعال</a></li>
<li><a href="">رزومه مدرسان</a></li>
<li><a href="">شرایط جذب مدرس</a></li>
</ul>
</li>
<li class="darkbrown">
<a class="link darkbrown"><span>سفارشیسازی</span></a>
<ul class="insidenavsubmenu">
<li><a href="">درج شیوهنامه در نرمافزار</a></li>
<li>
<a href="">
حمایت از وبگاهها
</a>
</li>
<li>
<a href="">
درج کتابخانه موضوعی
</a>
</li>
</ul>
</li>
</ul>
</div>
這是我的js:
jQuery(window).load(function() {
$('ul.insidenav > li').hover(function () {
if ($(this).find('ul.insidenavsubmenu').length > 0) {
$(this).find('ul.insidenavsubmenu').slideDown('1000');
$(this).addClass('arrow-down');
}
},function() {
if ($(this).find('ul.insidenavsubmenu').length > 0) {
$(this).find('ul.insidenavsubmenu').slideUp();
$(this).removeClass('arrow-down');
}
});
});
jQuery(window).load(function() {
$('ul.insidenavsubmenu > li').hover(function() {
if ($(this).find('ul.dubinsidenavsubmenu').length > 0) {
$(this).find('ul.dubinsidenavsubmenu').slideDown('1000');
$(this).addClass('arrow-down');
}
},function () {
if ($(this).find('ul.dubinsidenavsubmenu').length > 0) {
$(this).find('ul.dubinsidenavsubmenu').slideUp();
$(this).removeClass('arrow-down');
}
});
});
這是我的css:
.sidebar {
width: 18.75em;
height: 200px;
padding: 1.875em 0 1.375em 0;
float: right;
display: table;
}
.sidebar ul.insidenav {margin-bottom: 5px;display: inline;}
.sidebar ul.insidenav li.purple {background-color: #9b59b6;}
.sidebar ul.insidenav li.green {background-color: #6fba45;}
.sidebar ul.insidenav li.blue {background-color: #38afe2;}
.sidebar ul.insidenav li.darkorange {background-color: #e8a061;}
.sidebar ul.insidenav li.orange {background-color: #f1c40f;}
.sidebar ul.insidenav li.red {background-color: #e65947;}
.sidebar ul.insidenav li.lightgreen {background-color: #1ac98f;}
.sidebar ul.insidenav li.darkbrown {background-color: #a07e95;}
.sidebar ul.insidenav li.other1 {background-color: #3E5F8A;}
.sidebar ul.insidenav li.other2 {background-color: #3E5F8A;}
.sidebar ul.insidenav li.other3 {background-color: #3E5F8A;}
.sidebar ul.insidenav li ul.insidenavsubmenu{
color: #fff;
display: none;
margin-right: 65px;
padding-bottom: 5px;
}
.sidebar ul.insidenav li ul.insidenavsubmenu li a{color: #fff;cursor: pointer;font: 8pt IRANSans;}
.sidebar ul.insidenav li ul.insidenavsubmenu li ul.dubinsidenavsubmenu{
color: #fff;
display: none;
margin-right: 15px;
padding-bottom: 5px;
}
.sidebar ul.insidenav li ul.insidenavsubmenu li ul.dubinsidenavsubmenu li a{color: #fff;}
以下是正常工作的示例。
jQuery(window).load(function() { $('ul.insidenav > li').hover(function(e) { if ($(this).find('ul.insidenavsubmenu').length > 0) { $(this).find('ul.insidenavsubmenu').stop(true).slideDown('1000'); $(this).addClass('arrow-down'); } }, function() { if ($(this).find('ul.insidenavsubmenu').length > 0) { $(this).find('ul.insidenavsubmenu').stop(true).slideUp(); $(this).removeClass('arrow-down'); } }); }); jQuery(window).load(function() { $('ul.insidenavsubmenu > li').hover(function(e) { if ($(this).find('ul.dubinsidenavsubmenu').length > 0) { $(this).find('ul.dubinsidenavsubmenu').stop(true).slideDown('1000'); $(this).addClass('arrow-down'); } }, function() { if ($(this).find('ul.dubinsidenavsubmenu').length > 0) { $(this).find('ul.dubinsidenavsubmenu').stop(true).slideUp(); $(this).removeClass('arrow-down'); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sidebar"> <ul class="insidenav"> <li class="purple"> <a href="" class="link purple"><span>ابر پژوهیار</span></a> <ul style="display: none;" class="insidenavsubmenu"> <li><a href="">کتابخانه من</a> </li> <li><a target="_blank" href="">اطلاعات کاربر</a> </li> <li><a href="">مشخصات کاربر</a> </li> <li><a href="">اطلاعات حساب</a> </li> <li><a target="_blank" href="">تغیر کلمه عبور</a> </li> <li><a href="">خروج</a> </li> </ul> </li> <li class="green"> <a href="" class="link green"> <span>فرادادههای موضوعی</span> </a> </li> <li class="blue"> <a href="" class="link blue"> <span>استناددهی آنلاین</span> </a> </li> <li class="darkorange"> <a class="link darkorange"><span>دانشنامه استناددهی</span></a> <ul style="display: none;" class="insidenavsubmenu"> <li><a href="">همزمانسازی</a> </li> <li><a href="">شیوه نگارش مقاله</a> </li> <li><a href="">شیوه نگارش پایان نامه</a> </li> <li><a href="">استناددهی</a> </li> <li><a href="">بیشتر بدانیم...</a> </li> <li><a href="">مثال های استناددهی</a> </li> </ul> </li> <li class="orange"> <a href="" class="link orange"><span>خرید آنلاین</span></a> <ul style="display: none;" class="insidenavsubmenu"> <li><a target="_blank" href="">خرید و دریافت پستی</a> </li> <li><a href="">خرید و دریافت آنلاین</a> </li> <li><a target="_blank" href="">خرید «پژوهیار» از دیجیکالا</a> </li> </ul> </li> <li class="red"> <a class="link red"><span>کارگاههای آموزشی</span></a> <ul style="display: none;" class="insidenavsubmenu"> <li><a href="">کارگاههای آموزشی برگزار شده</a> </li> <li><a href="">شرایط کارگاههای آموزشی</a> </li> <li> <a>ثبت نام</a> <ul class="dubinsidenavsubmenu"> <li><a href="">فرم ثبت نام تربیت مدرس</a> </li> <li><a href="">فرم ثبت نام کارگاه سازمانی</a> </li> <li><a href="">فرم ثبت نام کارگاه عمومی</a> </li> </ul> </li> </ul> </li> <li class="lightgreen"> <a class="link lightgreen"><span>شبکه مدرسان</span></a> <ul style="display: none;" class="insidenavsubmenu"> <li><a href="">استانهای فعال</a> </li> <li><a href="">رزومه مدرسان</a> </li> <li><a href="">شرایط جذب مدرس</a> </li> </ul> </li> <li class="darkbrown"> <a class="link darkbrown"><span>سفارشیسازی</span></a> <ul class="insidenavsubmenu"> <li><a href="">درج شیوهنامه در نرمافزار</a> </li> <li> <a href=""> حمایت از وبگاهها </a> </li> <li> <a href=""> درج کتابخانه موضوعی </a> </li> </ul> </li> </ul> </div>
您應該更改slideDown
持續時間1000
,這將立即關閉。
$(this).find('ul.dubinsidenavsubmenu').slideDown({duration:10});
您也可以從這個問題中獲得幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.