多元素类名增删：jQuery点击图标仅显示对应内容的实现问题

问题描述 #

基于已有代码扩展了点击图标显示/隐藏对应内容的功能，但点击任意图标时，所有图标对应的内容都会同步显示或隐藏。需要实现：

• 点击单个图标仅显示其对应的内容
• 点击其他图标时，隐藏所有已显示内容，仅展示当前点击图标对应的内容
• 点击已激活的图标可关闭其内容

问题原因 #

原代码仅对当前点击图标的内容执行toggleClass操作，未处理其他图标的内容状态，导致所有内容被同时切换。

修改后的代码 #

JavaScript #

$('body').on('click', '.icon_product', function() {
    const isCurrentActive = $(this).hasClass("change_icon-product");
    
    // 重置所有图标状态和内容显示
    $('.icon_product').removeClass("change_icon-product");
    $('.txt-content').removeClass("Toggle_txt-content");
    
    // 如果当前图标未激活，则激活它并显示对应内容
    if (!isCurrentActive) {
        $(this).addClass("change_icon-product");
        $(this).find(".txt-content").addClass("Toggle_txt-content");
    }
});

CSS #

.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;
}

HTML #

<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>

代码说明 #

1. 点击图标时，先判断当前图标是否处于激活状态
2. 重置所有图标的激活状态，并隐藏所有内容
3. 如果当前图标未激活，则为其添加激活类，并显示对应的内容
4. 如果当前图标已激活，则保持重置后的状态（即关闭内容）

内容的提问来源于stack exchange，提问作者php