Sono bloccato a capire la logica per rendere accessibile un menu a discesa.jQuery capendo se il genitore ha perso 'focus'
Il codice HTML è strutturato come tali (i nomi delle classi più utilizzati per chiarezza):
<ul>
<li class="primaryMenuItem">
<a href="">Link 1</a>
<ul class="popUpMenu">
<li><a href="">Sub Link 1</a></li>
<li><a href="">Sub Link 2</a></li>
</ul>
</li>
<li class="primaryMenuItem">
<a href="">Link 2</a>
<ul class="popUpMenu">
<li><a href="">Sub Link 1</a></li>
<li><a href="">Sub Link 2</a></li>
</ul>
</li>
</ul>
collegamento 1 e Link 2, quando aleggiava, mostrerà le liste sotto-menu (menu a discesa). Ho questo funziona bene con alcuni jQuery e il plugin hoverIntent jQuery.
Il problema è che funziona solo con il mouse al momento.
La prossima sfida è far funzionare tutto ciò tramite la tastiera.
posso facilmente aggiungere un evento di messa a fuoco per i collegamenti di alto livello che poi scatenano i menu secondari:
$('ul.primaryMenuItem a:first').focus([call showMenu function])
che funziona bene.
Per chiudere il menu, un'opzione è, quando si apre un altro menu, controllare se c'è già un altro aperto e, in tal caso, chiuderlo.
Anche questo funziona correttamente.
Se ciò non riesce, tuttavia, è se l'ultimo menu è aperto e viene escluso. Dato che non hai inserito un altro menu, questo rimane aperto.
La sfida è capire come/quando chiudere il menu e la logica necessaria (jQuery) per capirlo. Idealmente, chiuderei il menu quando l'elemento attivo è su un elemento nella pagina AL DI FUORI di qualsiasi elemento figlio del menu.
Logicamente, sto cercando questo:
$('li.primaryMenuItem').blur([close $(this).find('ul.popUpMenu'))
Tuttavia, non è possibile farlo, dal momento che la LI in realtà non hanno messa a fuoco, ma piuttosto il tag di ancoraggio all'interno di esso.
Qualche suggerimento?
UPDATE:
forse un/modo migliore più semplice di porre la domanda:
Via jQuery, c'è un modo per 'orologio' per vedere se focus si è spostato al di fuori di tutti i figli di un particolare oggetto ?
C'è un errore di battitura? '$ ('ul.primaryMenuItem a: first'). focus ([chiama showMenu function])' -> '$ ('li.primaryMenuItem a: first'). focus ...' – superjos