jQuery導航欄鼠標懸停問題
[英]jQuery navbar mouse hover issue
問題描述
有一個用jQuery創建的邊欄。 當我快速將鼠標懸停在側欄上，然后在“紅色”區域上時，第3個項目必須打開一個子菜單，但沒有打開； 我該如何解決？
這是我的 CSS的jsfiddle ！ 但是它在所有地方都起作用！
我用我自己的CSS和jQuery 1.11.0
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/1.11.0/jquery.min.js"></script> <body> <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> </body>
2 個解決方案
解決方案1
1 已采納 2016-05-31 09:22:20
您的代碼運行良好，您所需要做的就是在正文末尾加載您的自定義腳本，以確保在附加事件之前，先將要附加事件處理程序的所有元素加載完畢。 要檢查是否將負載類型的JSFiddle javascript設置更改為“ No wrap-in body”
編輯：也是出於某種原因，您指定的選擇器$('ul.insidenav > li')無法正常工作。 如果您使用CSS1.0 $('ul.insidenav li')泛化之一，則可以正常工作。
如果查看CSS選擇器上的W3Schools文檔，我們可以找到ul.insidenav > li選擇器的注釋，其中指出：
注意：不會直接選擇不是指定父級的子級的元素。
這可能是造成此問題的原因，因為一般的ul.insidenav li工作正常。 參考整個CSS選擇器文檔，您可以在此處找到
解決方案2
1 2016-05-31 09:28:03
我會嘗試將所有代碼包裝在$（document）.ready中，只是為了確保所有文檔都已加載（盡管我建議您也執行弗拉基米爾的建議:)）
在這里看看：
https://learn.jquery.com/using-jquery-core/document-ready/
編輯：首先，將所有就緒函數移至一個就緒函數（ $(document).ready或$(function () {...}) ），然后將所有事件單擊綁定均移入此函數。
jQuery鼠標懸停問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.