Discussion :

[Kasko]

bonjour à tous,
J'ai un problème avec un code Jquery qui marche souvent et qui refuse de fonctionner par fois.
en l'exécutant si tout va bien j'ai l'image suivante :



Donc en cliquant sur une des croix en rouge le menu se reduit en n'affichant que les titres du menu à savoir Client,Agent et Procès.
Par exemple quand je clique sur client les sous menus au niveau de l'Agent et Procès
doivent être cacher c'est-à-dire Liste et enregistrement ainsi que voir état du dernier procès.

Quand ça ne marche pas j'ai l'image suivante :



Et là les plus restent bloqués même si je clique rien ne change(c'est-à-dire les sous menus ne se cachent pas.)

En vérifiant dans la console du navigateur google chrome j'ai trouvé l'erreur suivante :



Voici le code 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
23
24
25
 
(function($){
$(document).ready(function(){
 
$('#cssmenu li.active').addClass('open').children('ul').show();
	$('#cssmenu li.has-sub>a').on('click', function(){
		$(this).removeAttr('href');
		var element = $(this).parent('li');
		if (element.hasClass('open')) {
			element.removeClass('open');
			element.find('li').removeClass('open');
			element.find('ul').slideUp(200);
		}
		else {
			element.addClass('open');
			element.children('ul').slideDown(200);
			element.siblings('li').children('ul').slideUp(200);
			element.siblings('li').removeClass('open');
			element.siblings('li').find('li').removeClass('open');
			element.siblings('li').find('ul').slideUp(200);
		}
	});
 
});
})(jQuery);// ligne 24 du fichier script.js

Voici le code 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
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
@import url(http://fonts.googleapis.com/css?family=Raleway:400,200);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: 220px;
  margin-top:-30px; 
  margin-left:0px;
  margin-bottom:0px;
 font-family: "Courier New", Courier, monospace;
  color: #ffffff;
  /* height : 1000px; */
}
#cssmenu ul ul {
  display: none;
}
#cssmenu > ul > li.active > ul {
  display: block;
}
.align-right {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 16px;
  text-decoration: none;
  color: #ffffff;
  background: #5cae6c;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu > ul > li > a:hover {
  color: #d8f3f0;
}
#cssmenu ul > li.has-sub > a:after {
  position: absolute;
  right: 26px;
  top: 19px;
  z-index: 5;
  display: block;
  height: 10px;
  width: 2px;
  background: red;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub > a:before {
  position: absolute;
  right: 22px;
  top: 23px;
  display: block;
  width: 10px;
  height: 2px;
  background: red;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub.open > a:after,
#cssmenu ul > li.has-sub.open > a:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#cssmenu ul ul li a {
  padding: 14px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  text-decoration: none;
  color: #dddddd;
  background: #003300;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu ul ul ul li a {
  padding-left: 32px;
}
#cssmenu ul ul li a:hover {
  color: #5cae6c;
}
#cssmenu ul ul > li.has-sub > a:after {
  top: 16px;
  right: 26px;
  background: #dddddd;
}
#cssmenu ul ul > li.has-sub > a:before {
  top: 20px;
  background: #dddddd;
}
#cssmenu ul li a:hover {
  color: black;
}

Voici le code JSP :

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
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
 
<!doctype html>
<html lang=''>
<head>
<div class ="head">
<img src="Image/logo_acep.jpg" width="120" height="100" class = "niger"/><%--<img src="Image/IAI-NIGER.jpg" width="120" height="60" align = "right" class = "aia"/> --%>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
   <meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
   <link type="text/css" rel="stylesheet" href="inc/style.css"/>
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
   <title>Menu</title>
</div>
</head>
<body>
 
    <iframe id="mainFrame" scrolling="yes"  width="83%" height ="70%" name="mainFrame" marginwidth="0" marginheight="0" frameborder="0"></iframe>
 
<div id='cssmenu'>
  <ul>
    <li class='active has-sub'>
    <a href='#'>CLIENT</a>
    <ul>
      <li>
      <a href='<c:url value = "/listeClients"/>' target="mainFrame"><i class="fa fa-list" title = "LISTE"></i> LISTE</a>
      </li>
 
      <li><a href='<c:url value = "/FormClient"/>' target="mainFrame"><i class="fa fa-plus-square" title = "ENREGISTREMENT"></i> ENREGISTREMENT</a>
 
      </li>
      </li>
    </ul>
    </li>
 
    <li class='active has-sub'>
    <a href='#'>AGENT</a>
    <ul>
      <li><a href='<c:url value = "/listeAgents"/>' target="mainFrame"><i class="fa fa-list" title = "LISTE"></i> LISTE</a>
      </li>
      <li><a href='<c:url value = "/FormAgent"/>' target="mainFrame"><i class="fa fa-plus-square" title = "ENREGISTREMENT"></i> ENREGISTREMENT</a>
 
      </li>
    </ul>
    </li>
 
    <li  class='active has-sub'>
    <a href='#'>PROCES</a>
    <ul>
      <li><a href='<c:url value = "/ListeProces"/>' target="mainFrame"><i class="fa fa-list" title = "LISTE"></i> LISTE</a>
      </li>
 
      <li><a href='<c:url value = "/FormProces"/>' target="mainFrame"><i class="fa fa-plus-square" title = "ENREGISTREMENT"></i> ENREGISTREMENT</a></li>
 
      <li> <a href = "<c:url value = "/VoirEtatDernierProces"/>" class = "etat" target="mainFrame"><i class="fa fa-eye" title = "VOIR"></i> Dernier procès.</a></li>
      </li>
    </ul>
    </li>

Merci de prendre la peine de m'aider.