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 :

Creer un menu accordéon jquery


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2009
    Messages : 5
    Par défaut Creer un menu accordéon jquery
    Bonjour a tous je tente de développer une sorte de menu accordéon jquerry qui sera par la suite généré grâce à du php ( ce code existe déjà et est fonctionnel mais pour des raison pratique je ne l'ai pas mit).

    J'ai réussi à créer un menu qui est parfaitement fonctionnel mais mon problème est pour simplifier le code final.
    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
     
    .numero{
    width:400px;
    clear:both;} 
    #image{
    float:left;
    }
    .droite{
    float:left;
    width:300px;
    }
    .droite ul{
    list-style:none;
    margin:0;
    padding:0;
    }
    .droite li{
    float:right;
    } 
    .droite .titre{
    float:left;}
    .parent{
    width:270px;
    clear:both;
    }
    .parent1{
    width:295px;
    clear:both;
    }
    .numeroe{
    display:none;   
    width:325px;
    clear:both;
    }
    .brevee{
    display:none;   
    width:325px;
    clear:both;
    }
    .articlee{
    display:none;   
    width:325px;
    clear:both;
    }
    .appercu{
    background-image: url(apercu.png);
    display:block;
    width:25px;
    height:25px;
    }
    .appercu:hover{
    background-image: url(apercu_over.png);
     
    }
    .editer{
    background-image: url(modifier.png);
    display:block;
    width:25px;
    height:25px;
    }
    .editer:hover{
    background-image: url(modifier_over.png);
    }
    .publier{
    background-image: url(visible.png);
    display:block;
    width:25px;
    height:25px;
    }
    .publier:hover{
    background-image: url(visible_over.png);
    }
    .suprimer{
    background-image: url(supprimer.png);
    display:block;
    width:25px;
    height:25px;
    }
    .suprimer:hover{
    background-image: url(supprimer_over.png);
    }
    Le code Jquerry
    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
    jQuery(function( $ ){
    var container = $( "#numeroe1" );
    $( "#numero1" ).click(
    function( event ){
    event.preventDefault();
    if (container.is( ":visible" )){
    container.slideUp( 200 ); 
    document.getElementById('numero1').src='fleche_enroule.png';
     
    } else {
    container.slideDown( 200 );
    document.getElementById('numero1').src='fleche_deroule.png';
    }
    }
    ); 
    });
    jQuery(function( $ ){
    var container4 = $( "#articlee1" );
    $( "#article1" ).click(
    function( event ){
    event.preventDefault();
    if (container4.is( ":visible" )){
    container4.slideUp( 200 ); 
    document.getElementById('article1').src='fleche_enroule.png';
    } else {
    container4.slideDown( 200 ); 
    document.getElementById('article1').src='fleche_deroule.png';
    }
    }
    ); 
    });
    jQuery(function( $ ){
    var container = $( "#articlee2" );
    $( "#article2" ).click(
    function( event ){
    event.preventDefault();
    if (container.is( ":visible" )){
    container.slideUp( 200 ); 
    document.getElementById('article2').src='fleche_enroule.png';
    } else {
    container.slideDown( 200 ); 
    document.getElementById('article2').src='fleche_deroule.png';
    }
    }
    ); 
    });
    jQuery(function( $ ){
    var container3 = $( "#brevee1" );
    $( "#breve1" ).click(
    function( event ){
    event.preventDefault();
    if (container3.is( ":visible" )){
    container3.slideUp( 200 ); 
    document.getElementById('breve1').src='fleche_enroule.png';
    } else {
    container3.slideDown( 200 ); 
    document.getElementById('breve1').src='fleche_deroule.png';
    }
    }
    ); 
    });
    le code HTML
    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
    <body>
      <div id="total">
      <div class="numero">
        <div id="image">
          <img id="numero1" src="fleche_enroule.png" alt="" />
        </div>
        <div class="droite">
          <div class="parent1">
            <ul>
              <li class="titre">Numero 1</li>
              <li><a class="appercu" href="#"> </a></li>
              <li><a class="editer" href="#"> </a></li>
              <li> <a class="publier" href="#"> </a></li>
              <li> <a class="suprimer" href="#"> </a></li>
            </ul>
        </div>
        <div id="numeroe1" class="numeroe">
          <div id="image">
            <img id="article1" src="fleche_enroule.png" alt="" />
          </div>
          <div class="droite">
            <div class="parent">
              <ul>
                <li class="titre">Article 1</li>
                <li><a class="appercu" href="#"> </a></li>
                <li><a class="editer" href="#"> </a></li>
                <li> <a class="publier" href="#"> </a></li>
                <li> <a class="suprimer" href="#"> </a></li>
               </ul>
            </div>
            <div id="articlee1" class="articlee">
              <div class="parent">
                <ul>
                  <li class="titre">Encadre 1</li>
                  <li><a class="appercu" href="#"> </a></li>
                  <li><a class="editer" href="#"> </a></li>
                  <li> <a class="publier" href="#"> </a></li>
                  <li> <a class="suprimer" href="#"> </a></li>
                </ul>
              </div>
            </div>
          </div>
          <div id="image">
            <img id="article2" src="fleche_enroule.png" alt="" />
          </div>
          <div class="droite">
            <div class="parent">
              <ul>
                <li class="titre">Article 2</li>
                <li><a class="appercu" href="#"> </a></li>
                <li><a class="editer" href="#"> </a></li>
                <li> <a class="publier" href="#"> </a></li>
                <li> <a class="suprimer" href="#"> </a></li>
              </ul>
            </div>
            <div id="articlee2" class="articlee">
              <div class="parent">
                <ul>
                  <li class="titre">Encadre 1</li>
                  <li><a class="appercu" href="#"> </a></li>
                  <li><a class="editer" href="#"> </a></li>
                  <li> <a class="publier" href="#"> </a></li>
                  <li> <a class="suprimer" href="#"> </a></li>
                </ul>
              </div>
            </div>
          </div> 
          <div id="image">
            <img id="breve1" src="fleche_enroule.png" alt="" /> 
          </div>
          <div class="droite">
            <div class="parent">
              <ul>
                <li class="titre">Page de breve 1</li>
                <li><a class="appercu" href="#"> </a></li>
                <li><a class="editer" href="#"> </a></li>
                <li> <a class="publier" href="#"> </a></li>
                <li> <a class="suprimer" href="#"> </a></li>
              </ul>
            </div>
            <div id="brevee1" class="brevee">
              <div class="parent">
                <ul>
                  <li class="titre">Breve 1</li>
                  <li><a class="appercu" href="#"> </a></li>
                  <li><a class="editer" href="#"> </a></li>
                  <li> <a class="publier" href="#"> </a></li>
                  <li> <a class="suprimer" href="#"> </a></li>
                </ul>
              </div>
              <div class="parent">
                <ul>
                  <li class="titre">Breve 2</li>
                  <li><a class="appercu" href="#"> </a></li>
                  <li><a class="editer" href="#"> </a></li>
                  <li> <a class="publier" href="#"> </a></li>
                  <li> <a class="suprimer" href="#"> </a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        </div>
      </div>
      </div>
      </body>
    Mon souci est que pour chaque menu dépliant j'ai une nouvelle fonction jquerry et comme ce menu servira coté admin avec environ 200 lignes de numéros, 10 à 15 articles et pages de brève par numéros et ainsi de suite du coup mon code sera très long
    Ma question y a t'il un moyen d'intégrer des variable pour alléger le code.
    Du genre si je clique sur un des liens flèches je récupère son id et je l'implante dans le jquerry

  2. #2
    Membre éclairé
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    72
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Novembre 2010
    Messages : 72
    Par défaut
    Salut,

    pour ce faire, je te conseille de regarder la façon dont s'intègre jCarroussel cela pourra t'aider je pense.

    bonne continuation

  3. #3
    Membre à l'essai
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2009
    Messages : 5
    Par défaut
    Merci pour ta réponse je viens de jeter un œil et je ne vois pas du tout je m'emmêle les pédales dans les variables

  4. #4
    Membre éclairé
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    72
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Novembre 2010
    Messages : 72
    Par défaut
    Tu pourrais peut-etre nous dire ce que tu as compris, ce qui te pose probleme, comment nous pouvons t'aider pour pouvoir avancer sur ce sujet ?

    Bon courage pour les modifications, mais on est la si besoin dis nous de quoi tu as besoin

  5. #5
    Membre à l'essai
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2009
    Messages : 5
    Par défaut
    alors pour faire simple j'ai réfléchi et j'en suis arrivé a l'architecture arbre
    Du coup je pense partir avec la fonction getChild mais celle ci ne fonctionne pas
    en gros ce que je souhaite faire

    Clik sur l'image
    la div enfant se déploie
    en cas de reclik la div se replie
    Par contre je suis un réél débutant et mon souci est que cette fonction ne doit pas etre répété pour chaque element
    Au niveau structure
    on aura
    Numéro
    -----article
    ---------encadré
    -----article
    ---------encadré
    -----page de breves
    ---------breve
    ---------breve
    Numéro
    -----article
    ---------encadré
    -----article
    ---------encadré
    -----page de breves
    ---------breve
    ---------breve
    et ca plus de 600 fois
    a la limite une fonction pour les numero une pour les article et une pour les page de breve mais sinon ce sera une usine a gaz

  6. #6
    Membre éclairé
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    72
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Novembre 2010
    Messages : 72
    Par défaut
    il est très simple de faire cela, il te suffit pour un element de faire ce genre de chose :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    $('.nom_classe').click(function(){
       if($(this).children().attr('class') == 'nom_classe active'){   
          $(this).children().hide();
          $(this).children().addClass('active');
       }else{
          $(this).children().show();
          $(this).children().removeClass('active');
       }
    });
    de façon simplifiée je te laisse regardé quelque peu

    bon courage

Discussions similaires

  1. Menu accordéon avec JQUERY
    Par ConceptInterWEB dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 23/06/2013, 20h23
  2. creer un menu deroulant en c++
    Par magicamine dans le forum C++
    Réponses: 6
    Dernier message: 10/01/2007, 14h24
  3. [Forms]creer un menu vers des modules forms6
    Par mike600river dans le forum Forms
    Réponses: 2
    Dernier message: 07/12/2006, 09h28
  4. [VB6] creer un menu contextuel
    Par ennamsaoui dans le forum VB 6 et antérieur
    Réponses: 18
    Dernier message: 30/05/2006, 09h28
  5. [Struts] conseils pour creer un Menu
    Par romdelf dans le forum Struts 1
    Réponses: 3
    Dernier message: 12/05/2006, 15h28

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