我的网站上有一个包含问答项目的常见问题解答部分，该部分仅显示标题，直到用户单击该项目，然后它会展开以显示答案。整个部分是一个 2x2 网格，每个项目都属于它的单元格。当我通过用 JS 切换 CSS 类并更改属性来单击扩展中的项目时，它会影响行中的其他元素，因此其他元素仍然是封闭的，但会收到扩展元素的高度和填充。我该如何解决这个问题？
document.querySelectorAll(".collapsible").forEach(n => n.addEventListener("click", f => {
var target = f.target;
var content = target.parentElement.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
content.className = "content";
} else {
content.style.maxHeight = content.scrollHeight + "px";
content.className = "expanded";
}
})) .page__faq {
}
.faq {
background-color: white;
padding: 80px 0px 80px 0px;
}
.faq__container {
}
.faq__body {
}
.faq__title {
font-size: 36px;
line-height: 144%;
margin: 0px 0px 32px 0px;
}
.faq__container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-row-gap: 16px;
grid-column-gap: 24px;
}
.faq__item {
display: flex;
flex-direction: column;
padding: 16px 0px 16px 0px;
border-bottom: solid 1px #F2F4F7;
}
.faq_item__title_container {
display: flex;
align-items: center;
justify-content: space-between;
}
.faq_item__title {
font-family: 'SF Pro Display';
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: #101828;
}
/* Style the button that is used to open and close the collapsible content */
.collapsible {
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'SF Pro Display';
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: #101828;
background-color: white;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
max-width: 535px;
font-family: 'SF Pro Text';
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 133%;
}
.expanded {
max-width: 535px;
font-family: 'SF Pro Text';
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 133%;
transition: max-height 0.2s ease-out;
}
.collapsible:after {
display: flex;
align-items: center;
justify-content: center;
content: url("./faq_item_plus.svg");
border-radius: 100px;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2);
padding: 5px 5px 5px 5px;
width: 60px;
height: 60px;
background-color: white;
}
.active:after {
content: url("./faq_item_cross.svg");
border-radius: 100px;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2);
padding: 5px 5px 5px 5px;
width: 60px;
height: 60px;
background-color: white;
}
.faq_cost {
grid-area: 1 / 1 / 2 / 2;
}
.faq_guarantee {
grid-area: 2 / 1 / 3 / 2;
}
.faq_how_long {
grid-area: 1 / 2 / 2 / 3;
}
.faq_confidentiality {
grid-area: 2 / 2 / 3 / 3;
}<section class="page__faq faq">
<div class="faq__body_container _container">
<div class="faq__body">
<h1 class="h1 faq__title">FAQ</h1>
<div class="faq__container">
<div class="faq_cost faq__item">
<div class="faq_item__title_container">
<p class="faq_item__title">What is the cost of a mobile application?</p>
<button type="button" class="collapsible"></button>
</div>
<div class="content">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="faq_guarantee faq__item">
<div class="faq_item__title_container">
<p class="faq_item__title">Do you provide a guarantee for the mobile application?</p>
<button type="button" class="collapsible"></button>
</div>
<div class="content">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="faq_how_long faq__item">
<div class="faq_item__title_container">
<p class="faq_item__title">How long will development take?</p>
<button type="button" class="collapsible"></button>
</div>
<div class="content">
<p>Development terms directly depend on the requirements for the mobile application, the characteristics of the company, as well as the wishes of the customer.<br><br>
Average development time from start to finished application:<br>
Medium projects up to 3 months.<br>
Large projects about 4-6 months.<br>
To get a more accurate estimate of the project completion time, it is necessary to determine the main task of the application, think over its logic and functionality.
</p>
</div>
</div>
<div class="faq_confidentiality faq__item">
<div class="faq_item__title_container">
<p class="faq_item__title">I will not tell my idea, do you guarantee confidentiality?</p>
<button type="button" class="collapsible"></button>
</div>
<div class="content">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
</div>
</section>发生这种情况是因为所有 div 共享相同的类“内容”。您需要分别定位每个 div，或者使用
closest()faq__item您可以这样做：
document.querySelectorAll(".collapsible").forEach(n => n.addEventListener("click", f => {
var target = f.target;
var container = target.closest('.faq__item');
var content = container.querySelector('.content');
if (content.style.maxHeight) {
content.style.maxHeight = null;
content.className = "content";
} else {
content.style.maxHeight = content.scrollHeight + "px";
content.className = "expanded";
}
}));