Maison > Article > interface Web > [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

[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

巴扎黑original: 2017-06-22 10:00:361223parcourir

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction de base et explication détaillée de l'utilisation du sélecteur précédent + suivant dans jQueryArticle suivant：Introduction de base et explication détaillée de l'utilisation du sélecteur précédent + suivant dans jQuery

Articles Liés

Voir plus