communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Classes pour ajouter et supprimer plusieurs éléments (JQuery et JavaScript)
P粉042455250
P粉042455250 2024-02-25 21:30:33
0
1
450

J'ai pu obtenir une réponse appropriée pour modifier le code de la question précédente.

Lien vers la question précédente : Ajouter et supprimer des classes pour plusieurs éléments

Maintenant, j'ai développé le code précédent et ajouté du contenu, lorsque l'on clique sur l'icône, son contenu sera affiché ou masqué.

Le problème avec ce code est qu'en cliquant sur n'importe quelle icône disponible, le contenu de toutes les icônes est affiché ou masqué.

Mais ce n'est pas ce que je veux. Je souhaite afficher le contenu correspondant en cliquant sur chaque icône, et en cliquant sur une autre icône, tout le contenu sera masqué et seul le contenu lié à l'icône cliquée sera affiché. 

$('body').on('click', '.icon_product', function() {
    $(this).toggleClass("change_icon-product");
    $(this).parent().siblings().find('.icon_product').removeClass("change_icon-product");

    $(this).find(".txt-content").toggleClass("Toggle_txt-content");
 });
.icon_product {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding: 15px;
    margin-top: 0px;
}

.icon-line1_product,
.icon-line2_product {
    width: 35px;
    height: 5px;
    background-color: #f00;
    margin: 6px 0;
    border-radius: 10px;
    transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
}

.icon-line2_product {
    transform: rotate(90deg) translate(-11px, 0px);
    -webkit-transform: rotate(90deg) translate(-11px, 0px);
    -moz-transform: rotate(90deg) translate(-11px, 0px);
    -o-transform: rotate(90deg) translate(-11px, 0px);
    -ms-transform: rotate(90deg) translate(-11px, 0px);
}

.change_icon-product .icon-line1_product {
    transform: rotate(45deg) translate(8px, 0px);
    -webkit-transform: rotate(45deg) translate(8px, 0px);
    -moz-transform: rotate(45deg) translate(8px, 0px);
    -o-transform: rotate(45deg) translate(8px, 0px);
    -ms-transform: rotate(45deg) translate(8px, 0px);
}

.change_icon-product .icon-line2_product {
    transform: rotate(-45deg) translate(8px, 0px);
    -webkit-transform: rotate(-45deg) translate(8px, 0px);
    -moz-transform: rotate(-45deg) translate(8px, 0px);
    -o-transform: rotate(-45deg) translate(8px, 0px);
    -ms-transform: rotate(-45deg) translate(8px, 0px);
}


/* 
*
*
*
 */

.txt-content {
    display: none;
}

.Toggle_txt-content {
    display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>

        <div class="main-content_product">
            <div class="icon_product">
                <div class="icon-line1_product test"></div>
                <div class="icon-line2_product test"></div>

                <div class="txt-content">
                    <h3>Lorem ipsum</h3>
                    <p>
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                        harum voluptatum fuga, nam tempore exercitationem dolore placeat.
                    </p>
                </div>

            </div>
        </div>

        <div class="main-content_product">
            <div class="icon_product">
                <div class="icon-line1_product test"></div>
                <div class="icon-line2_product test"></div>

                <div class="txt-content">
                    <h3>Lorem ipsum</h3>
                    <p>
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                        harum voluptatum fuga, nam tempore exercitationem dolore placeat.
                    </p>
                </div>

            </div>
        </div>

        <div class="main-content_product">
            <div class="icon_product">
                <div class="icon-line1_product test"></div>
                <div class="icon-line2_product test"></div>

                <div class="txt-content">
                    <h3>Lorem ipsum</h3>
                    <p>
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                        harum voluptatum fuga, nam tempore exercitationem dolore placeat.
                    </p>
                </div>

            </div>
        </div>

    </section>

P粉042455250
P粉042455250

répondre à tous(1)
P粉359850827
P粉3598508272024-02-26 11:25:02 1 plancher

Vous souhaitez donc également supprimer d'autres contenus, si un autre contenu est ouvert, ajoutez simplement une ligne de code : 

$(this).parent().siblings().find('.txt-content').removeClass("Toggle_txt-content");

Une fois qu'une autre ligne s'ouvre, la ligne ci-dessus supprime ou masque les autres contenus.

Voici la démo : 

$('body').on('click', '.icon_product', function() {
    $(this).toggleClass("change_icon-product");
    $(this).parent().siblings().find('.icon_product').removeClass("change_icon-product");
    $(this).find(".txt-content").toggleClass("Toggle_txt-content");
    $(this).parent().siblings().find('.txt-content').removeClass("Toggle_txt-content");
 });
body {
  background: transparent; /* Make it white if you need */
  color: #fcbe24;
  padding: 0 24px;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.icon_product {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding: 15px;
    margin-top: 0px;
}

.icon-line1_product,
.icon-line2_product {
    width: 35px;
    height: 5px;
    background-color: #f00;
    margin: 6px 0;
    border-radius: 10px;
    transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
}

.icon-line2_product {
    transform: rotate(90deg) translate(-11px, 0px);
    -webkit-transform: rotate(90deg) translate(-11px, 0px);
    -moz-transform: rotate(90deg) translate(-11px, 0px);
    -o-transform: rotate(90deg) translate(-11px, 0px);
    -ms-transform: rotate(90deg) translate(-11px, 0px);
}

.change_icon-product .icon-line1_product {
    transform: rotate(45deg) translate(8px, 0px);
    -webkit-transform: rotate(45deg) translate(8px, 0px);
    -moz-transform: rotate(45deg) translate(8px, 0px);
    -o-transform: rotate(45deg) translate(8px, 0px);
    -ms-transform: rotate(45deg) translate(8px, 0px);
}

.change_icon-product .icon-line2_product {
    transform: rotate(-45deg) translate(8px, 0px);
    -webkit-transform: rotate(-45deg) translate(8px, 0px);
    -moz-transform: rotate(-45deg) translate(8px, 0px);
    -o-transform: rotate(-45deg) translate(8px, 0px);
    -ms-transform: rotate(-45deg) translate(8px, 0px);
}


/* 
*
*
*
 */

.txt-content {
    display: none;
}

.Toggle_txt-content {
    display: block;
}
sssccc



            

                

                    

                    


                    

                        
Lorem ipsum

                        

                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                            harum voluptatum fuga, nam tempore exercitationem dolore placeat.
                        

                    


                

            


            

                

                    

                    


                    

                        
Lorem ipsum

                        

                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                            harum voluptatum fuga, nam tempore exercitationem dolore placeat.
                        

                    


                

            


            

                

                    

                    


                    

                        
Lorem ipsum

                        

                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                            harum voluptatum fuga, nam tempore exercitationem dolore placeat.
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal