Selezione del div nidificato in un elemento li

L’utente passa il mouse sopra una voce di menu, quindi voglio mostrare il sottomenu all’utente. Voglio usare Jquery per mostrare e hide il sub-nav-conatiner div. l’unico problema è il mio jQuery show e nasconde TUTTI i sottomenu – voglio mostrarne solo uno. Quindi ho bisogno di selezionare il div annidato al momento, spero che abbia senso. Ho provato tutti i tipi senza fortuna 🙁

 

jQuery

 $(document).ready(function () { $('.sub-nav-container').css('display', 'none !important;'); }); $('.sub-menu-header').mouseover(function () { ????????? }); $('.sub-menu-header').mouseleave(function () { $('.sub-nav-container').css('display', 'none !important;'); }); 

Usa this .

 $('.sub-menu-header').mouseover(function () { $(this).find('div.sub-nav-container').show(); }); 

È tuttavia ansible semplificare il codice, senza bisogno di mouseover separati e gestori di mouseleave . Basta usare .hover() con un singolo argomento di funzione:

 $('.sub-menu-header').hover(function () { $(this).find('div.sub-nav-container').toggle(); }); 
 $('.sub-menu-header').mouseover(function () { $(this).children(".sub-nav-container").show(); }); 
 $('.sub-menu-header').mouseover(function () { $('.sub-nav-container', this).show(); });