IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Afficher/masquer une div au click


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Futur Membre du Club
    Homme Profil pro
    en reconversion
    Inscrit en
    Novembre 2019
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : en reconversion

    Informations forums :
    Inscription : Novembre 2019
    Messages : 3
    Par défaut Afficher/masquer une div au click
    Bonjour,
    je viens vers vous, car je n'arrive pas à obtenir le résultat voulu dans mon exercice.
    Je m'explique : je suis débutant en programmation web. Après avoir suivi différents cours en javascript puis jQuery, je me suis lancé un exercice à moi même, pour sortir des cadres du cours et faire de moi même.
    Donc l'idée était de créer un site relativement simple. html et css tout va bien. Mais voilà, dans le corps du site, j'ai eu l'idée de mettre 3 boutons, chacun correspondant à la déscription d'un service. Lorsque l'on clique, sur l'un des boutons, la description du service apparaît au centre de l'écran, et disparaît lorsque l'on clique à coté ou sur l'un des deux autres boutons. Voilà l'idée.
    Dans la pratique, j'ai donc crée 3 <button> chacun avec un ID. Ensuite, j'ai crée 3 <div> avec ID et class.
    En script, voilà ce que j'ai fait :
    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
    $(document).ready(function(){
     
    			$(".descriptionserv").hide(); // 
     
    			$("#btnecr").click(function(){
    				$("#ecriture").toggle(300);
    				$("#creasites").hide(300);
    				$("#design").hide(300);
     
     
    			});
    			$("#btncrea").click(function(){
    				$("#creasites").toggle(300);
    				$("#ecriture").hide(300);
    				$("#design").hide(300);
     
    			});
    			$("#btndesign").click(function(){
    				$("#design").toggle(300);
    				$("#creasites").hide(300);
    				$("#ecriture").hide(300);
     
    			});
    });
    Voilà, ce n'est pas très "orthodoxe", mais ça fonctionne. Mais, je pêche totalement lorsque je veux rajouter la fonction de pouvoir fermer la description en cliquant en dehors de la description... Et puis, il y a peut-être une meilleure façon d'écrire ce code. Donc je ne viens pas ici pour forcément avoir une réponse avec un code tout fait, mais plus dans l'optique d'avoir des conseils pour orienter ma réflexion dans le bons sens/ordre. Mon objectif est d'y arrivé sans faire de copier-coller. Mais je n'ai peut-être pas structuré ma pensé correctement...
    J'espère avoir réussi à être clair.

    Merci d'avance !

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 513
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 513
    Par défaut
    Citation Envoyé par MikDream Voir le message
    ...lorsque je veux rajouter la fonction de pouvoir fermer la description en cliquant en dehors de la description...
    Tu peux attacher un écouteur d'événement "click" sur le <body> qui permet de masquer/fermer la description, et après il va falloir gérer la propagation des événements click sur #btnecr,#btncrea,#btndesign avec stopPropagation()

  3. #3
    Futur Membre du Club
    Homme Profil pro
    en reconversion
    Inscrit en
    Novembre 2019
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : en reconversion

    Informations forums :
    Inscription : Novembre 2019
    Messages : 3
    Par défaut
    Merci pour cette réponse !
    J'avais déjà pensé à mettre le 'click' sur le <body>, mais du coup cela avait pour conséquence de fermer immédiatement à l'ouverture les descriptions... Mais je n'avais pas pensé à la propagation... Je vais m'y atteler !
    Merci

  4. #4
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    je t'invite à faire une recherche : "ouvrir fermer div au click"
    Tu trouveras des solutions, notamment avec des class (plutôt que des id), qui permettront une plus grande flexibilité.
    Par exemple, celle-ci.


    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div>
      <button type="button" class="btn" data-id="1">1</button>
      <button type="button" class="btn" data-id="2">2</button>
      <button type="button" class="btn" data-id="3">3</button>
    </div>
     
    <div>
      <div class="box" id="box-1">one</div>
      <div class="box" id="box-2">two</div>
      <div class="box" id="box-3">three</div>
    </div>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    .btn { cursor:pointer; }
    .box { display:none; padding:10px; border:1px dashed #ccc; background:#eee; }
    Code jQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    $(document).ready(function(){
     
      // clic sur les boutons
      $('.btn').on('click',function(event){
        event.stopPropagation(); // important
        var id = $(this).data('id');  // on récupère le data-id
        $(".box:not(#box-"+id+")").hide(); // on ferme les box, sauf celle concernée
        $("#box-"+id).slideToggle(); // on ouvre ou ferme celle concernée
      });
      // clic en dehors des div
      $(window).on('click', function(){
        $(".box").slideUp(); // on ferme
      });
     
    });
    Dernière modification par Invité ; 16/11/2019 à 11h02.

  5. #5
    Futur Membre du Club
    Homme Profil pro
    en reconversion
    Inscrit en
    Novembre 2019
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : en reconversion

    Informations forums :
    Inscription : Novembre 2019
    Messages : 3
    Par défaut
    Bonjour,
    merci pour cette réponse. J'avais effectué des recherches, mais cela ne correspondait pas trop à ce que j'avais en tête... Peut-être que mes recherches n'était pas assez précises... Mais je n'avais pas pensé à privilégié les class. En regardant le code que vous m'avez envoyé, ça correspond plus à l'idée. Et je ne connaissais pas l'utilisation des "data-id" sur les boutons... Je vais étudier ce code, et l'adapter à mes besoins !
    Merci beaucoup !
    Je vais mettre le sujet en "résolu", car je pense que j'ai tous les éléments de réflexion qu'il me fallait pour parvenir à faire mon exercice .

    Merci encore

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Afficher/masquer une div
    Par elect31 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 26/02/2017, 13h00
  2. Afficher/Masquer une div
    Par Evelyne31 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 07/11/2012, 14h45
  3. Afficher / masquer une div
    Par laurent94 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 02/12/2011, 15h47
  4. Afficher/masquer une div sur une autre frame
    Par jerome69003 dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 26/11/2009, 18h32
  5. Afficher/Masquer une div
    Par philbona dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 08/02/2007, 23h09

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo