Ciao a tutti, ho un problema per il quale spero possiate darmi una mano.

Nel sito che sto costruendo utilizzo una funzione jQuery per far apparire e sparire un sub-menu al passaggio del mouse con effetto dissolvenza.

Questo è il codice:

codice:
(function($) {

$('.menu-item-has-children').hover(  function() {    $('.sub-menu', this).stop().fadeToggle(400);  },);         

	})( jQuery );


Il problema che si verifica è il seguente: quando clicco su una delle voci del sub-menu, vengo naturalmente dirottato sulla pagina corrispondente al link cliccato.

Tuttavia se da quella pagina premo nel browser il pulsante "indietro", mi ritrovo con il sub-menu aperto, anche se non sono in hover con il mouse.

Se poi vado in hover, il menu si chiude.

In pratica la funzione hover si inverte.

Ho chiesto supporto a Chat GPT, che mi ha consigliato questa modifica:
codice:
$('.menu-item-has-children').hover(  function() {
    $('.sub-menu', this).stop().fadeToggle(400);
  },
  function() {
    $('.sub-menu', this).stop().fadeToggle(400);
  }
);


In questo modo in effetti si risolve, ma rimane un piccolo problema.

Adesso quando clicco su "indietro" nel browser la funzione hover non risulta più invertita.

Tuttavia, dopo aver premuto "indietro", appena caricata la pagina, il sub-menu risulta ancora aperto (come lo avevo lasciato al momento in cui ho cliccato sul link).

Si richiude correttamente quando con il mouse passo dal pulsante indietro a qualsiasi punto della pagina web.

Quindi il funzionamento è corretto e non è più invertito, ma rimane l'unico inconveniente che ti ho descritto.

Potete aiutarmi a risolverlo?

Grazie!