Fermer une liste ouverte suite à un clic

Bonjour à tous,

J'ai créé des liens qui déroulent une liste au clic (ce n 'est donc pas un menu déroulant), exemple :

CSS :

.ouverte{display: none;}

HTML :

<div class="ouvrante">Ouvrir !</div><div class="overte">Contenu affiché</div>

Jquery :

$('.ouvrante').click(function(){
  $('.ouvrante').toggle();
});

Avec ce code, on est obligé de cliquer sur div.ouvrante pour masquer div.ouverte. J'aimerais que div.ouverte soit aussi masquée si l'on clique n'importe où dans la page. Je précise que je dois le faire au clic. J'aurais pu utiliser mouseenter mais cela ne marche pas sur les écrans tactiles.

J'ai cherché des exemples sur le net, j'ai testé des exemples avec bind sur $(document) et unbind sans succès.

Merci !!!
Modifié par deejay-bee (07 Jan 2014 - 18:45)

salut,

je ne connais pas grand chose de JavaScript, ainsi dire que tu copié collé mais je comprends une peu près le principe.

Tu devrais mettre une condition à ton code, "if" je clique sur ta div je "toggle" sinon "else" je re-toggle si elle est déjà ouverte quand je clique ailleurs (window, document), si elle n'est pas ouverte rien ne se passe (pour ne pas ouvrir au clique ailleurs)

bon courage, tu devrais t'en sortir !

J'ai déjà essayé. Le problème c'est que si je referme la liste déroulante au clic sur body (qui représente un clic partout) la liste se referme quand je clique sur un élément de la liste ce que je ne souhaite pas. Par ailleurs, je me demande s'il n'y a pas une autre solution car le test sera fait à chaque clic dans la page ce qui n'est pas très performant.

Bé pourquoi tu ne fait pas un bouton input tout simplement ?

<select name="" id="">
        <option selected="selected">Choisissez</option>
	<option value="1"> Mademoiseille</option>
	<option value="2"> Madame</option>
	<option value="3"> Monsieur</option>
</select>

Je ne peux pas utiliser la balise select, on ne peut pas la styler en CSS comme on peut le faire avec une liste html (<ul>).

Tu peut styler ton select avec un peu de javascript : http://github.com/octopuscreative/FancySelect
Modifié par benj (08 Jan 2014 - 18:09)

a écrit :
Je ne peux pas utiliser la balise select, on ne peut pas la styler en CSS comme on peut le faire avec une liste html (<ul>).

Ca c'est la bonne excuse ! As-tu pensé à l'accessibilité ?

Dans l'état, ton code n'est pas accessible du tout. Dans les faits, on peut rendre une liste déroulante n'utilisant pas <select> accessible, mais ça demande un très gros effort pour gérer le clavier correctement jusque dans les détails. Avec <select> c'est implicite, ou plutôt, ce n'est pas de ton ressort.

Le code donné est un code d'exemple. En vrai, j'utilise <ul> qui est sémantiquement correct pour ce que je veux faire. Ma question était de savoir comment on fait pour faire disparaitre un toggle en cliquant n'importe où dans la page, pas de savoir si mon truc est accessible...

D'ailleurs je n'utilise pas le toggle uniquement sur ma liste déroulante mais sur d'autres éléments où je ne peux pas utiliser de select. Merci pour vos propositions mais cela ne me sera pas utile.

J'ai trouvé un début de réponse, mais cela ne marche pas si j'ouvre un élément avec toggle, que je ne le ferme pas et que j'ouvre un 2nd avec toggle...
Modifié par deejay-bee (10 Jan 2014 - 12:28)

a écrit :
Ma question était de savoir comment on fait pour faire disparaitre un toggle en cliquant n'importe où dans la page, pas de savoir si mon truc est accessible...

La question de l'accessibilité doit se poser à tous les niveaux du développement d'un projet, même ceux qui paraissent les plus infimes.

Après on peut se poser la question de l'accessibilité autrement, en s'orientant plus vers l'utilisabilité (c'est fortement lié): est-ce que le comportement que tu recherches paraît naturel ? pas nécessairement...


Pour en revenir à ton problème spécifiquement, le seul moyen que tu as est de garder en mémoire ce qui est actuellement ouvert, et de le refermer lors du clic sur une autre zone ou sur le body.

Cependant pour le bien de l'accessibilité et de l'utilisabilité, je persiste, tu devrais utiliser tant que possible des éléments de formulaire standard avant d'aller chercher des widgets personnalisés, qui ne sont sauf cas très très exceptionnels que de pâles répliques qui ne sont de loin pas à la hauteur.