jquery 'this' confusion

Salut J'ai le code ci-dessous, une fois que le premier (seul) élément du menu est survolé, le sous-texte devrait apparaître. J'ai utilisé 'ceci' comme je pensais qu'il devrait trouver la classe avec le "li" et ensuite glisser vers le bas. Cela ne semble pas fonctionner, bien que 'ceci' fonctionne pour quand vous supprimez le pointeur, car il glisse vers le haut (partie supérieure pas le sous-texte).jquery 'this' confusion

<body> 
<script type="text/javascript"> 
$(document).ready(function() 
{ 


    $('li').hover(function() 
     { 

      $(this).stop(true, true).slideDown();     
     $(this).slideDown("slow");     
     }, 

     function() 
     { 

     $(this).slideUp("fast"); 

    } 

     );  




}); 
</script> 

    <ul> 
     <li class="hover"> 
      <p><a href="#">Hover</a></p> 
      <p class="subtext">Show More</p> 
     </li> 
    </ul>

Un conseil?

Merci

ajouté css:

ul 
{ 
    margin:0; 
    padding:0; 
} 

li 
{ 
    width:100px; 
    height:50px; 
    float:left; 
    color:191919; 
    text-align:center; 
    overflow:hidden; 
} 

a 
{ 
    color:FFF; 
    text-decoration:none; 
} 

p 
{ 
    padding:0px 5px; 
} 

.subtext 
{ 
     padding-top:15px; 
     background-color: #6AA63B; 
} 


.hover 
{ 
    background-color: #6AA63B; 
}

Source

2010-03-24 Elliott

Lorsque vous utilisez ceci, vous faites référence à l'élément auquel l'événement était lié. Dans ce cas, l'élément LI. Vous voulez masquer et afficher l'élément P uniquement. Comme ça.

HTML

<ul> 
    <li class="hover"> 
     <p><a href="#">Hover</a></p> 
     <p class="subtext" style="display: none;">Show More</p> 
    </li> 
</ul>

jQuery

$(document).ready(function() { 
    $('li').hover(function() { 
     $(this).children("p.subtext").slideDown("slow"); 
    }, 
    function() { 
     $(this).children("p.subtext").slideUp("fast"); 
    }); 
});

Source

2010-03-24 22:11:45

Merci, mais il ne semble toujours pas de travail, j'ai ajouté css incase quoi que ce soit faux dans ce domaine. – Elliott

Vérifier ma mise à jour –

Toujours pas de chance, merci encore – Elliott

Je pense que c'est ce que vous êtes après:

$('li').hover(function() { 
    $(this).children('.subtext').stop(true, true).slideToggle();   
});

Si vous voulez masquer/afficher l'élément class="subtext", vous devez trouvez-le dans le <li> que vous survolez. Cela fait cela, et va glisser en vol stationnaire, à la souris. Dans cet exemple, this fait référence à l'élément DOM li et $(this) fait référence à l'objet jQuery li.

Source

2010-03-24 22:08:15

@Elliott - Je te veux caché d'abord, changer est CSS à cette : '.subtext {padding-top: 15px; couleur de fond: # 6AA63B; affichage: aucun; } ' –

Son n'est pas montré sur la page de chargement quand même sans l'affichage aucun? – Elliott

Elliott - Quel comportement veux-tu? montré d'abord, caché, spectacle, puis caché sur hover? .... pouvez-vous décrire un peu ce qui devrait être caché/montré initialement, alors que devrait-il se passer? jQuery peut faire ce que vous voulez, je ne sais pas exactement ce que vous recherchez. –

-2

Tout d'abord vous devez mettre l'ordre

jQuery.noConflict();

Ensuite, changez $ avec JQuery. Exemple:

<script> 
    jQuery.noConflict(); 

    // Use jQuery via jQuery(...) 
    jQuery(document).ready(function(){ 
     jQuery("div").hide(); 
    }); 

    // Use Prototype with $(...), etc. 
    $('someid').hide();

bons liens à ce sujet:

Source

2010-03-24 22:26:57 XDeveloper

Changer les bibliothèques pour faire quelque chose jQuery ne va pas bien n'est pas une bonne solution ... –

jquery 'this' confusion

Répondre

Questions connexes