Klassen zum Hinzufügen und Entfernen mehrerer Elemente (JQuery und JavaScript)

Question

Ich konnte eine passende Antwort zum Bearbeiten des Codes in der vorherigen Frage finden.

Link zur vorherigen Frage: Klassen für mehrere Elemente hinzufügen und entfernen

Jetzt habe ich den vorherigen Code entwickelt und Inhalte hinzugefügt. Wenn auf das Symbol geklickt wird, wird dessen Inhalt angezeigt oder ausgeblendet.

Das Problem bei diesem Code besteht darin, dass durch Klicken auf ein beliebiges verfügbares Symbol der Inhalt aller Symbole angezeigt oder ausgeblendet wird.

Aber das ist nicht das, was ich will. Ich möchte den entsprechenden Inhalt anzeigen, indem ich auf jedes Symbol klicke. Wenn ich auf ein anderes Symbol klicke, wird der gesamte Inhalt ausgeblendet und nur der Inhalt angezeigt, der sich auf das angeklickte Symbol bezieht.

$('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>

Answer 1

因此，您也想删除其他内容，如果打开了另一个内容，您只需添加一行代码：

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

一旦另一行打开，上面的行就会删除或隐藏其他内容。

这是演示：

$('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;
}

            

                

                    

                    


                    

                        
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.