Adapter un script pour fermer une fenêtre

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:

---

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:

---

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:

---

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

Bonjour

Code:

---

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

---

Merci!!

En fait ca marche partiellement.
Si j'ajoute ceci

Code:

---

$('.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:

---

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:

---

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

En fait, ceci à l'air de fonctionner

Code:

---

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!

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

Code:

---

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

---

Code:

---

$('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)

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

Non c'est leur "plugin" qui est mal foutu

Citation:

---

Non c'est leur "plugin" qui est mal foutu

---

Mince.

J'aimerais trouver un autre menu du genre. Mais si ce menu est sympa, il est mal documenté et apparemment, mal fouti :)

C'est aussi le fait de bricoler par dessus qui arrange pas ^^
sans lire le code source utilisé difficile de bricoler faudrait modifier la source
dis moi si ca marche (ca devrait ):mrgreen:

Hello
non, malheureusement, ca ne marche pas mais je vais laissé comme ceci.

Code:

---

1 2 3 4 5 6 7 8 9

$('.cl').click(function(){ $(this).closest("li.cbp-hropen").removeClass('cbp-hropen'); });   /*   $('div').on('click', '.cl', function(){$('.cbp-hrsub').hide();});   $('div').on('click', '#cbp-hrmenu', function(){$(this).show();});   */

---

Je veux pas trop perdre de temps avec ca surtout si je changerai le menu.

Merci

d'acc

Bonjour,
je ne saisie pas à priori pourquoi tu veux changer le comportement d'un tel menu qui est, de nos jours, couramment reconnu et dont les gens sont +/- habitués.

Néanmoins tu peux toujours simuler un click sur l'onglet du menu via un

Code:

---

$(".cbp-hropen a").trigger("click");

---