IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Menu a trois niveau en jQuery, bug d'affichage


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Avril 2010
    Messages
    39
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2010
    Messages : 39
    Par défaut Menu a trois niveau en jQuery, bug d'affichage
    Bonjour,

    Après avec lu un bouquin de noob sur jQuery, je m'essai a mes premiers créations.

    J'ai réalisé un menu, dont je suis absolument certain de la structure html et jquery, pourtant l'affichage deconne au niveau du slide.

    Je l'ai donc refait depuis 0, complétement épuré des trucs inutile.

    Mon professeur de javascript n'a pas pour le moment su me dire pourquoi mon menu déconne.


    Le premier menu est de type inline.
    Au clic sur un li j'affiche un sous menu avec slideToggle (fonctionne bien).

    Au mouse over du li du second menu, je slidedown un autre menu.
    A la sortie de la souris il doit remonté.

    Pouvez vous jetez un coup d'oeil à ce petit bout de code et m'aider a comprendre ce que je fais de mal.

    Merci d'avance


    le jQuery
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    	$(document).ready(function() 
    	{
     
    		// Je masque le sous menu 1 & 2
    		$('ul:eq(1)').css('display','none');
    		$('ul:eq(2)').css('display','none');
     
    		// Au clique d'un element du menu, j'affiche le sous menu 1
    		$('ul:eq(0) > li').click(function(){
    			$(this).children('ul').slideToggle();			
    		});
     
    		// Au survol d'un element du sous menu 1, j'affiche le sousmenu2
    		$('ul:eq(1)>li').mouseover(function(){
    			$(this).children('ul').slideDown();
    		});
     
    		// A la sortie d'un element du sous menu 1, je masque le sousmenu2
    		$('ul:eq(1)>li').mouseout(function(){
    			$(this).children('ul').slideUp();
    		});
    	});
    le style css
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    		ul{
    			list-style-type:none;
    			padding:0px 0px 0px 15px;
    		}
    		li{
    			width:100px;
    			display:block;
    		}
    		a{
    			width:100px;
    		}
    		#firstul{
    			position:relative;
    		}
    		#firstul > li{
    			display: inline-block;
    		}
    		#firstul ul{
    			position:absolute;
    		}
    le contenu du body
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <ul id='firstul'>
    	<li><a href="#">Lien</a></li>
    	<li><a href="#">Lien</a>
    		<ul>
    			<li><a href="#">Sous Menu 1</a></li>
    			<li><a href="#">Sous Menu 1</a>
    				<ul>
    					<li><a href="#">Sous Menu 2</a></li>
    					<li><a href="#">Sous Menu 2</a></li>
    					<li><a href="#">Sous Menu 2</a></li>
    				</ul>
    			</li>
    		</ul>
    	</li>
    	<li><a href="#">Lien</a></li>
    </ul>


    Voila il y a rien d'autre dans ma page (73 lignes en tout).

    merci d'avance pour votre aide !

  2. #2
    Membre averti
    Profil pro
    Inscrit en
    Avril 2010
    Messages
    39
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2010
    Messages : 39
    Par défaut
    Pour ceux que ça pourrai aidé,

    Après avoir longtemps tourné en rond a essayé de comprendre ce problème, j'ai finalement utilisé l'écouteur 'on' de la nouvelle version de jquery.

    Avec ce code j'ai réussi à obtenir mon slide :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    $("#nav ul:eq(1)").on("mouseenter", 'li', function(event){
    	$(this).children('ul').slideDown('slow');
    });
    $("#nav ul:eq(1)").on("mouseleave", 'li', function(event){
    	$(this).children('ul').slideUp('slow');
    });
    Apparemment l'ancienne méthode pour poser des écouteurs est déprécié.
    http://api.jquery.com/on/
    Merci à ceux qui m'ont aidé/répondu.

Discussions similaires

  1. Menu déroulant compatible IE6 avec JQuery
    Par Thy974 dans le forum jQuery
    Réponses: 2
    Dernier message: 26/07/2009, 15h39
  2. [jQuery] Bug sous Firefox 3
    Par vg33 dans le forum jQuery
    Réponses: 5
    Dernier message: 01/08/2008, 15h34
  3. Bug d'affichage de menu sous IE6
    Par oneTime dans le forum Mise en page CSS
    Réponses: 13
    Dernier message: 09/07/2008, 16h52
  4. [SQL]incrémentation sur trois niveau
    Par egg3774 dans le forum Requêtes et SQL.
    Réponses: 4
    Dernier message: 30/03/2007, 17h51
  5. Recherche de menu css multi-niveau
    Par lodan dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 09/02/2007, 21h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo