Faire disparaître un sous menu

Version imprimable

Bonjour tout le monde,

Voici le code HTML renvoyé via FireBug :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<ul id="menu-deroulant">
        <li>
                        <a id="liste_article" href="#">
                Les articles
            </a>
        </li>
        <li>
                        <a id="liste_categories_article" href="#">
                Les catgégories
            </a>
            <div class="resultat_recherche">
        <ul>
                    <li class="li_categ"> <a href="#"> Présentation <input type="hidden" value="11"> </a> </li>
                    <li class="li_categ"> <a href="#"> Tutoriel <input type="hidden" value="13"> </a> </li>
                    <li class="li_categ"> <a href="#"> Evenements <input type="hidden" value="14"> </a> </li>
            </ul>
</div>
        </li>
        <li>
                        <a id="liste_tags_article" href="#">
                Les tags
            </a>
            <div class="resultat_recherche">
            </div>
        </li>
    </ul>

Ensuite ce que je veux faire c'est par exemple :
1) je passe la souris sur le menu "Les catégories", la les sous-menus correspondant("Présentation", "Tutoriel", "Evenements") s'affiche:cela fonctionne bien ^^

2 a) Quand je click sur un sous-menu, les informations des articles correspondant s'affiche: cela fonctionne plutôt bien aussi je pense(le "je pense" vous allez sans doute le comprendre par la suite^^).

2 b)Par contre imaginons j'ai fait la 1) étape et ensuite je décide de retirer ma souris de ce menu, je souhaiterais que les sous-menus correspondant disparaisse: c'est là que je bloque(voilà pourquoi "je pense" vu que je ne peux pas cliquer sur un sous-menu :( )

Voici le code Jquery correspondant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Recherche d'article - Deuxième bouton : Liste des catégories avec au moins un article.
$('li a#liste_categories_article').hover(function() {
	$(this).parent().children('div.resultat_recherche').load('liste_categories');
},function(){
	// Recherche d'article - Liste des catégories : Lorsqu'on click sur une catégorie, on va afficher les articles.
	$('.li_categ').on('click', function() {
		$('div#articles').slideDown("fast").html('<img src="../../img/ajax-loader.gif"></img>').load('liste_articleCategories/'+$(this).children().children('input').val());
		// Permet de laisser le curseur de la page à l'endroit ou on est lorsqu'on click sur le lien.
		// return false;
	});
	$('#menu-deroulant').mouseout(function() {
		$('#menu-deroulant ul').slideUp("fast");
	});
});

Quelqu'un aurait-il une idée pour résoudre mon problème s'il vous plaît ?!

Merci par avance.

Bonjour

C'est un problème qui a déjà été traité dans la :faq: : Comment puis-je différer la fermeture d'un menu ?

Exemple avec votre code corrigé :

Code:

1
2
li { margin-left: 24px; }
.resultat_recherche { display: none; }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ul id="menu-deroulant">
    <li>
        <a id="liste_article" href="#">Les articles</a>
    </li>
    <li>
        <a id="liste_categories_article" href="#">Les catégories</a>
        <div class="resultat_recherche">
            <ul>
                <li class="li_categ"> <a href="#"> Présentation <input type="hidden" value="11"> </a> </li>
                <li class="li_categ"> <a href="#"> Tutoriel <input type="hidden" value="13"> </a> </li>
                <li class="li_categ"> <a href="#"> Evenements <input type="hidden" value="14"> </a> </li>
            </ul>
        </div>
    </li>
    <li>
        <a id="liste_tags_article" href="#">Les tags</a>
        <div class="resultat_recherche">
 
        </div>
    </li>
</ul>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$( function(){
 
    var jObjLiCat = $( '#liste_categories_article' ).parent(),
        jObjResultat = jObjLiCat.find( ".resultat_recherche" ),
        ObjMenuTimeout  = null;
 
    jObjLiCat.on( "mouseenter", function(){
        jObjResultat.show();
    });
 
    jObjLiCat.on( "mouseleave", function(){
        ObjMenuTimeout  = setTimeout( function(){
            jObjResultat.hide();
        }, 1500 );
    });
 
    jObjResultat.on( "mouseenter", function(){
        clearTimeout( ObjMenuTimeout );
    });
 
    jObjResultat.on( "mouseleave", function(){
        jObjResultat.hide();
    });
 
});

Bonjour,
Je m'excuse je ne l'avait pas trouvé dans le FAQ...
En tout cas, je vous remercie beaucoup de votre réponse. J'ai réussit à faire ce que je souhaité.
Voici mon code jquery final :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
menuTimeout_categ  = null;
	// Recherche d'article - Deuxième bouton : Liste des catégories avec au moins un article.
	$('li a#liste_categories_article').hover(function() {
		$(this).parent().children('div#resultat_recherche_categ').load('liste_categories').show();
	},function(){
		// Recherche d'article - Liste des catégories : Lorsqu'on click sur une catégorie, on va afficher les articles.
		$('.li_categ').on( "click", function() {
			$('div#articles').html('<img src="../../img/ajax-loader.gif"></img>').load('liste_articleCategories/'+$(this).children().children('input').val());
			return false;
		});
		$(this).parent().on( "mouseenter", function(){
			$(this).parent().find('div#resultat_recherche_categ').show();
		});
		$(this).parent().on( "mouseleave", function(){
			menuTimeout_categ  = setTimeout( function(){
				$(this).parent().find('div#resultat_recherche_categ').hide();
			}, 1500 );
		});
 
		$(this).parent().find('div#resultat_recherche_categ').on( "mouseenter", function(){
			clearTimeout( menuTimeout_categ );
		});
 
		$(this).parent().on( "mouseleave", function(){
			$(this).parent().find('div#resultat_recherche_categ').hide();
		});
	});

Encore merci.