Discussion :

[pierrot10]

Bonjour à tous,

J'ai trouvé un menu horizontal responsie que j'aime bien mais qui est peut documenté, En il ne l'est pas.
Je n'ai pas besoin de truc d'énorme et ceci
http://www.smart-idea.io/perrieres/measures/
répond à mon besoin.

Sauf que j'aimerais ajouter un bouton pour fermer le menu. Et je n'arrive pas à comprendre le script
http://www.smart-idea.io/perrieres/m...izontalMenu.js, pourtant simple, pour que mon lien ferme le menu.

Alors pour être plus explicite, aller sur cette page
http://www.smart-idea.io/perrieres/measures/
Puis developpez 'Filtre'.
Vous verrez en bas, que j'ai ajouter un lien "Fermer". Quand je clique sur close, il doit refermer la partie verte, comme si je recliquais sur filtre, ou, n'importe où en dehors de la partie verte. Car en effet, quand on clique à l'extérieur de la partie verte, cette dernière ce referme.

J'ai essayé de comprendre qu'est-ce qui cause la fermeture quand on reclique sur "Filtre"

Je pense que c'est ceci

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
function open( event ) {
 
		if( current !== -1 ) {
			$listItems.eq( current ).removeClass( 'cbp-hropen' );
		}
 
		var $item = $( event.currentTarget ).parent( 'li' ),
			idx = $item.index();
 
		if( current === idx ) {
			$item.removeClass( 'cbp-hropen' );
			current = -1;
		}
		else {
			$item.addClass( 'cbp-hropen' );
			current = idx;
			$body.off( 'click' ).on( 'click', close );
		}
 
		return false;
 
	}

Mais qu'est ce qui appelle la function open?
Ne serait-ce pas à l'initiation

Code :

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

1
2
3
4
5
function init() {
		$menuItems.on( 'click', open );
		$listItems.on( 'click', function( event ) { event.stopPropagation(); } );
		$(".cl").on( 'click', function( event ) { event.stopPropagation(); } ); // Attention, ca c'est moi qui l'ai rajouté
	}

dans menuItems ou listItems?

Mais comment dire au script que <a class="cl"> doit faire la même chose que <a href="#">Filtre</a>.
Vu que le lient filtre, n'a pas d'id ni de class, je vois pas comment le script se réfère à ce dernier, sauf ici

Code :

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

1
2
3
4
var $listItems = $( '#cbp-hrmenu > ul > li' ),
		$menuItems = $listItems.children( 'a' ),
		$body = $( 'body' ),
		current = -1;

mais encore il ne spécifie pas lequel de lien?

Alors ma question, comment faire pour ajouter un nouveau bouton (ou lien) qui va fermer ce volet vert.

Merci pour vos lumières

[bonjourajax]

Bonjour

Code :

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

1
2
 
$('nomdubouton').click(function(){$('nomdumenu').hide();});

[pierrot10]

Merci!!

En fait ca marche partiellement.
Si j'ajoute ceci

Code :

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

$('.cl').click(function(){$('.cbp-hrsub').hide();});

il me ferme bien le menu, mais je ne peux plus l'ouvrir.

En fait, ce que je dois faire, c'est de retirer la classe 'cbp-hropen' pour le fermer.
Si on ouvre et ferme le menu Filtre, on voir dans FireDebug que la classe est ajoutée ou retirée.

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
<li class="cbp-hropen">
							<a href="#">Filtre</a>
							<div class="cbp-hrsub">
								<div class="cbp-hrsub-inner">
 
									<div>
										<h4>Sélectionner un date</h4>
										<p>
											<input type="text" class="date-change" id="from" name="from" placeholder="From">
											<input type="text" id="to" class="date-change" name="to" placeholder="to">
										</p>
									</div>
									<div>
										<h4>Sélectionner une station</h4>
																				<ul class="station">
 
							 			<li class="input-group stations">
	 										<input type="radio" data-name="station" name="station" id="id-st-1" checked value="1" />
											<label for="id-st-1">
												st-1																							</label>
	 									</li>
 
							 			<li class="input-group stations">
	 										<input type="radio" data-name="station" name="station" id="id-st-2"  value="2" />
											<label for="id-st-2">
												st-2																							</label>
	 									</li>
	 																			</ul>
									</div>
 
 
								</div><!-- /cbp-hrsub-inner -->
								<div class="cbp-hrsub-inner">
									<div>
 
										<p class="cl"><a href="#">Close</a></p>
									</div>
 
								</div>
 
							</div><!-- /cbp-hrsub -->
 
						</li>

Donc à partir de lä

Code :

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

1
2
3
$('.cl').click(function(){
$('.???').removeClass("cbp-hropen");
});

Comment remonter au li qui a cette classe? , soit le premier qu'il rencontre, en remontant?

Milles mercis

[pierrot10]

En fait, ceci à l'air de fonctionner

Code :

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

1
2
3
$('.cl').click(function(){
        $(this).closest("li.cbp-hropen").removeClass('cbp-hropen');
    });

sauf que lorsque je veux le réouvrir, il faut cliquer deux fois sur "Filtre"!!!! Bizard
http://www.smart-idea.io/perrieres/measures

D'ailleur, c'est bizard, car quand je le ferme, et je clique une fois sur "Filtre", il y a comme des pointtiées qui entourent Filtre, et puis si on reclique, le menu s'ouvre!

[bonjourajax]

Pour faire simple tu peux le faire en 2 lignes:
(et au passage corrigera le double click)

Code :

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

$('div').on('click', '.cl', function(){$('.cbp-hrsub').hide();});

Code :

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

$('div').on('click', 'nomDuMenu', function(){$(this).show();});

Je trouve que c'est dommage d'utiliser des plugins pour des choses vraiment basiques (même pour les trucs plus compliqués mis a part jquery je prefere ne pas utiliser)

[pierrot10]

Merci, je vais essayer, mais c'est quoi ce double clique?
C'est du css?

En fait, ce n'est pas vraiment un double clique.
Quand je le ferme en appuyant sur "Fermer" et puis ensuite je clique n'importe ou sur la page, le menu se redeveloppe au premier clique