我能够得到一个合适的答案来编辑上一个问题中的代码。
上一个问题的链接： 添加和删除多个元素的类
现在我已经开发了之前的代码，并添加了内容，当点击图标时，其内容将被显示或隐藏。
此代码的问题在于，通过单击任何可用图标，所有图标的内容都会显示或隐藏。
但这不是我想要的。我想通过点击每个图标来显示相应的内容，而点击另一个图标时，所有的内容都会被隐藏，只显示与被点击的图标相关的内容。
$('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>
因此，您也想删除其他内容，如果打开了另一个内容，您只需添加一行代码：
$(this).parent().siblings().find('.txt-content').removeClass("Toggle_txt-content");一旦另一行打开，上面的行就会删除或隐藏其他内容。
这是演示：