Validation de mon menu [jquery]

**crapaud** · 28/07/2015, 01h28

Bien le bonsoir les g33ks!

Je voudrai votre avis sur mon menu, surtout côté deroulement de mes sous menu et comment je l'ai géré
Voici le code :

Code html :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Menu Jquery</title>
    <script src="jquery.min.js"></script>
    <style>
                 ul > li {
                                list-style:none;  
                                float:left;
                                padding:10px;
                                width:150px;    
                  }
                  
                  ul li > ul {
                                display:none;
                                padding:0;
                  }
                  
                   ul li ul > li{
                                float:none;
                                clear:left;
                  }
 
        </style>
 
 
  </head>
 
<body>
 
 
<ul>
<li><a href="#" id="test1">Test1</a>
	<ul>
    	<li>sous menu 1</li>
        <li>sous menu 1</li>
    	<li>sous menu 1</li>
    </ul>
</li>
 
<li><a href="#" id="test2">Test2</a>
	<ul>
    	<li>sous menu 2</li>
        <li>sous menu 2</li>
    	<li>sous menu 2</li>
    </ul>
 
</li>
<li><a href="#" id="test3">Test3</a>
<ul>
    	<li>sous menu 3</li>
        <li>sous menu 3</li>
    	<li>sous menu 3</li>
    </ul>
 
</li>
<li><a href="#" id="test4">Test4</a>
	<ul>
    	<li>sous menu 4</li>
        <li>sous menu 4</li>
    	<li>sous menu 4</li>
    </ul>
 
</li>
</ul>
 
<script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
  $(function() {
 
	$('a').on('click', function() {
		$('ul li ul').removeClass("montrer");
		$('ul li ul').fadeOut(1000);
		$(this).next().addClass("montrer");
	        $(this).next().fadeIn(1000);
 
	       });				 
	);

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
</script>
</body>
</html>

J'ai fait une fausse classe "montrer", donc qui n'existe pas mais qui me sert de test, et qui me dit que si elle existe et ba montrer mon sous menu..
Si elle n'existe pas, bye bye le sous menu!

Merci de me dire ce que vous en pensez!
Si je me prends la tête pour rien, si ya plus simple! enfin bref, lachez vous!!!

Merci !

**danielhagnoul** · 28/07/2015, 15h44

Amélioration du code : il peut y avoir des tags "a" ailleurs dans votre page web.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$( "[id^='test']" ).on( 'click', function( ){
 
    $( 'ul li ul' )
        .removeClass( "montrer" )
        .fadeOut( 1000 );
 
    $( this )
        .next()
        .addClass("montrer")
        .fadeIn( 1000 );
});

**crapaud** · 28/07/2015, 22h03

ah oui effectivement c'est carrément plus clair comme ça et tu as complètement raison pour la balise a!

merci pour ces précisions que je vais utiliser et mettre de côté comme mémo!