我應該使用jquery嗎？我想在單擊類 faq-q 時
隱藏/顯示p 元素
它是如何作業的？
這就是它的樣子
html
css
.faq {
flex-direction: column;
margin-top: 1.5rem;
display: flex;
}
.faq-item {
box-shadow: 0 0 1.25rem rgb(0 0 0 / 8%);
border-radius: 0.3125rem;
background: #e3eaf4;
margin-top: 1.25rem;
}
.faq-q {
padding: 0 3.125rem 0 2.5rem;
font-size: 1rem;
align-items: center;
color: #000;
height: 5rem;
margin-bottom: 0;
font-weight: 600;
cursor: pointer;
display: flex;
justify-content: space-between;
}
.faq-ans {
padding: 0 2.5rem 2.5rem;
}
uj5u.com熱心網友回復：
我應該使用jquery嗎？我想在單擊類 faq-q 時隱藏/顯示 p 元素
對于像這樣的簡單任務，我認為您不需要 jQuery。只要簡單querySelectorAll()和addEventListener()方法就夠了
document.querySelectorAll(".faq-q").forEach(el => {
el.addEventListener("click", (e) => {
el.parentElement.querySelector('.faq-ans > p').style.display =
el.parentElement.querySelector('.faq-ans > p').style.display == "none" ? "block" : "none";
})
});.faq {
flex-direction: column;
margin-top: 1.5rem;
display: flex;
}
.faq-item {
box-shadow: 0 0 1.25rem rgb(0 0 0 / 8%);
border-radius: 0.3125rem;
background: #e3eaf4;
margin-top: 1.25rem;
}
.faq-q {
padding: 0 3.125rem 0 2.5rem;
font-size: 1rem;
align-items: center;
color: #000;
height: 5rem;
margin-bottom: 0;
font-weight: 600;
cursor: pointer;
display: flex;
justify-content: space-between;
}
.faq-ans {
padding: 0 2.5rem 2.5rem;
}<div class="faq">
<div class="faq-iten is-active">
<h5 class="faq-q">When was the company founded?<i class="fa-solid fa-chevron-down"></i></h5>
<div class="faq-ans">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat porro ipsam delectus, blanditiis expedita cupiditate.</p>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/514521.html
標籤：jQuerycss
上一篇：改變第一個字母的位置