国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

我能夠得到一個(gè)合適的答案來(lái)編輯上一個(gè)問(wèn)題中的代碼。

上一個(gè)問(wèn)題的鏈接： 添加和刪??除多個(gè)元素的類

現(xiàn)在我已經(jīng)開發(fā)了之前的代碼，并添加了內(nèi)容，當(dāng)點(diǎn)擊圖標(biāo)時(shí)，其內(nèi)容將被顯示或隱藏。

此代碼的問(wèn)題在于，通過(guò)單擊任何可用圖標(biāo)，所有圖標(biāo)的內(nèi)容都會(huì)顯示或隱藏。

但這不是我想要的。我想通過(guò)點(diǎn)擊每個(gè)圖標(biāo)來(lái)顯示相應(yīng)的內(nèi)容，而點(diǎn)擊另一個(gè)圖標(biāo)時(shí)，所有的內(nèi)容都會(huì)被隱藏，只顯示與被點(diǎn)擊的圖標(biāo)相關(guān)的內(nèi)容。

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