我能够得到一个合适的答案来编辑上一个问题中的代码。
上一个问题的链接: Add and remove classes for multiple elements
现在我已经开发了之前的代码,并添加了内容,当点击图标时,其内容将被显示或隐藏。
此代码的问题在于,通过单击任何可用图标,所有图标的内容都会显示或隐藏。
但这不是我想要的。我想通过点击每个图标来显示相应的内容,而点击另一个图标时,所有内容都会被隐藏,只显示与被点击的图标相关的内容。
$('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");
一旦另一行打开,上面的行就会删除或隐藏其他内容。
这是演示:
$('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;
}
<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>
关于javascript - 添加和删除多个元素的类(JQuery 和 JavaScript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/76329863/