jQuery Navbar Maus Hover Problem

gibt es eine Sidebar, die ich mit jquery erstellt habe. Wenn ich mit der Maus schnell auf die Seitenleiste und dann auf "rot" gehe, muss der dritte Punkt ein Untermenü öffnen, aber es geht nicht; Wie kann ich es beheben?jQuery Navbar Maus Hover Problem

this is my jsfiddle mit css! aber es dosent arbeiten überall dort !!

ich meine eigene CSS und 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>

Quelle

2016-05-31 Kalagar

Ihr Code funktioniert gut, alles, was Sie tun müssen, ist Ihr eigenes Skript am Ende des Körpers zu laden alle Elemente, um sicherzustellen, Sie versuchen, Ereignishandler anzuhängen, die geladen werden, bevor die Ereignisse angehängt werden. Um zu überprüfen, dass der JSFiddle ändern JavaScript-Einstellungen von Lasttyp „No wrap - in Körper“

EDIT: Auch aus irgendeinem Grunde Ihre Angabe Wähler $('ul.insidenav > li') funktionieren nicht. wenn Sie Generalisieren von CSS1.0 $('ul.insidenav li') ich arbeite gut.

Wenn wir die W3Schools Dokumentation über CSS-Selektoren sehen wir einen Hinweis für den ul.insidenav > li Wähler finden, die besagt, dass:

Note: Elements that are not directly a child of the specified parent, are not selected.

Dies ist die Ursache des Problems sein kann, da die allgemeinen ul.insidenav li funktioniert gut . Verweis auf die gesamte CSS-Selektoren Dokumentation Sie here

Quelle

2016-05-31 09:22:20

danke. bu meine Frage ist, warum in der roten Bereich der 3. Menüpunkt wird nicht funktionieren, nachdem ich meine Maus schnell über die Seitenleiste schweben? Ich habe diesen Vorschlag gemacht, aber immer noch nicht funktioniert !!! – Kalagar

Ich habe ein Problem mit dem Selektor, den Sie verwenden, gefunden. Ich habe meine Antwort mit einer Lösung aktualisiert, die Ihr Problem behebt, und Ihr Code beginnt ordnungsgemäß zu funktionieren. Wenn Sie möchten, dass ich Ihnen erläutere, warum die spezifizierende Selektordosis nicht funktioniert, lassen Sie es mich wissen, damit ich sie weiter untersuchen kann. Hoffe, das war hilfreich für Sie –

was muss ich tun? ich habe 'ul.insidenav> li' repariert, funktioniert aber immer noch nicht !! – Kalagar

finden Ich würde versuchen, den gesamten Code in $ (document) .ready Verpackung, nur um sicher zu stellen, dass das gesamte Dokument geladen ist (obwohl ich raten würde tun, was Vladimir schon sagt, auch :))

Werfen Sie einen Blick hier:

https://learn.jquery.com/using-jquery-core/document-ready/

Edit: vor allem, stellen Sie bereit Funktionen einer ready-Funktion ($(document).ready oder $(function() {...})) und alle Ereignis Klick bewegen bindet in diese f Salbung.

Quelle

2016-05-31 09:28:03 st2rseeker

schau mal wieder meinen Code !! funktioniert immer noch nicht !! "ROT Bereich 3 .. !!!" – Kalagar

Überprüfen Sie Ihre Geige (obwohl es mich stört, dass Sie mehrere fertige Funktionen haben ...), aber ich stelle fest, dass diese Zeile '$ ('. Trick-Rate-Eingabe'). Rating();' schlägt mit 'Uncaught TypeError: $ (...). rating ist keine Funktion', die den Rest der Funktion verhindert. Passiert es auch für dich oder ist es nur ich? – st2rseeker

Überprüfen Sie die Bearbeitung - das besser zuerst passieren, und dann überprüfen (vielleicht mit Konsolenprotokollen oder Debuggern), dass alles ausgeführt wird und nichts wirft. – st2rseeker

jQuery Navbar Maus Hover Problem

Antwort

Verwandte Themen