11548 sujets

JavaScript, DOM et API Web HTML5

Slidetoggle déroulant toutes les div

Bonjour,

j'ai un petit blocage que vous pourrez sans nul doute m'aider à résoudre. J'ai utilisé une liste d'items d'un portfolio dans une liste à l'intérieur j'y ai inclus une div à dérouler afin de voir une description. 

<div id="global">
<p><h2 class="current">TITRE</h2>
<span>MOTS CLES</span></p>
<div class="pane" style="display:block">INTRODUCTION</div>
</div>


La partie js 

   $(".pane").hide(); 	
    $("h2.current").hover( function () {
        if ($(this).next(".pane:visible").length != 0) {
            $(this).next(".pane").slideToggle("normal");
        }
        else {
            $(".pane").slideToggle("normal");
            $(this).next(".pane").slideDown("normal");
        }   
    });


Mon soucis étant que toutes mes div masquées se dévoilent en passant la souris sur n'importe quel balise h2.current... L'idéal serait que ce soit la div appartenant à la balise h2 qui se dévoile et pas les autres.
Où ai-je fauté ?

Merci pour vos réponses Smiley smile
Bonjour,
si j'ai bien compris tu veux au survol du h2.current qu'une div associée s'agrandisse pour donner l'explication, peut être que ce code t'aidera? (je ne l'ai pas testé)



$("h2.current").on('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    $(this).next(".pane").stop().slideDown("normal");
  } else {
    $(this).next(".pane").stop().slideUp("normal");
  }
);
Bonjour,

Pour commencer ton code est invalide P, ne peut pas contenir H2 qui est de type Block.

A mon avis c'est le premier problème à résoudre, next() s'il ne trouve pas de frère va matcher tous les elements qui peuvent répondre aux critères passés en paramètres de next(). Hors ici .pane, n'est pas frère direct de h2 (.current ou pas).

Peux tu également poster un autre morceau de code, ou la class de H2 n'est pas .current
Modifié par rs459 (21 May 2012 - 23:13)
Sujet clos
Aller à