[jquery] Combinez le sélecteur de classe, les méthodes next et prev pour obtenir l'effet d'expansion et de masquage des nœuds adjacents-js tutoriel-php.cn

[jquery] Combinez le sélecteur de classe, les méthodes next et prev pour obtenir l'effet d'expansion et de masquage des nœuds adjacents

巴扎黑

Libérer： 2017-06-22 10:00:36

original

1277 Les gens l'ont consulté

Dans les effets de page, parfois l'attribut ID ne peut pas être ajouté aux colonnes bouclées par notre programme, car il peut y avoir des listes qui peuvent boucler plusieurs identifiants identiques, donc Jquery ne peut pas être utilisé Le sélecteur d'ID de , à ce moment nous pouvons utiliser le sélecteur de classe,

En même temps, nous devrons peut-être également limiter le fonctionnement de cet élément de nœud au courant p (ou tableau (au milieu), regardons le code :

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
<tête>
    <meta http-equiv="Content-Type" content="text /html; charset=utf-8" />
    <titre> jquery效果titre>
    <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript" >script>
    <script tapez="text/javascript">
        //展开隐藏层
        $(document).ready(fonction () {
             $(".part").click(fonction () {
                 var hideP = $(this).next();
                if (hideP.css('affichage') == 'aucun') {
                    masquerP. show();
                    $(this).hide();
                }
               else {
                    hideP.hide ();       });
            $( ".all

"
).cliquez(fonction () {                var hideP =
$(this).prev();                 si (hideP.css('
affichage') == 'aucun') {                    hideP.show(); $(this).hide();                }
else {
hideP.hide();
$(this).show();
}
         });
        });/
tête><
corps>  <
p class='classA'>
<p classe="part">
Contenu 1p> ; < p classe="tous"style
= "display:none"> ;Contenu 1, hahaha, je l'ai développé, voici plus de contenup> p> <
p class= 'classA'>
                                      🎜>>Contenu 2p> >classe
="all" style="display:none">Contenu 2, hahaha , je l'ai développé, voici plus de contenup> p> <p classe= 'classA' ><p classe="partie">Contenu 3p>
                                        > style="display:none">Con tente 3, hahaha, je l'ai développé, voici plus de contenup>                                    >body>html> C'est à dire, je veux développez le contenu caché de la classe A sans affecter les autres contenus de la même classe A. En fait, l'accent est mis ici sur l'utilisation des méthodes
jquery next et prev. Bien sûr, cela peut également être utilisé dans d'autres situations.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!