我正在處理簡單的常見問題解答部分，我需要一點幫助。
問題是當我在問題之間切換時，展開/折疊箭頭將保持向上。你有什么建議嗎？
$(document).ready(function(){
var nadpis = $('.nadpis');
nadpis.on('click', function () {
$(this).siblings().slideToggle()
$(this).children().toggleClass("off on")
nadpis.not(this).siblings().slideUp();
});
});.textbox:first-child p {
display: none;
}
.nadpis {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
gap: 5em;
border-bottom: 1px solid;
}
.off i:nth-child(2) {
display: none;
}
.off i:first-child {
display: block;
}
.on i:nth-child(2) {
display: block;
}
.on i:first-child {
display: none;
}<link href="https://fonts.googleapis.com/css2?family=Kumbh Sans:wght@400;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/7a8caae1e8.js" crossorigin="anonymous"></script>
<section class="faq-content">
<div class="faq-textside">
<div class="faq-text">
<div class="textbox">
<div class="nadpis">
<h2>How many team members can I invite?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p>You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>What is the maximum file upload size?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p> No more than 2GB. All files in your account must fit your allotted storage space.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>How do I reset my password?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p>Click “Forgot password” from the login page or “Change password” from your profile page.
A reset link will be emailed to you.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>Can I cancel my subscription?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p>Yes! Send us a message and we’ll process your request no questions asked.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>Do you provide additional support?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p> Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>這是完整的代碼筆
uj5u.com熱心網友回復：
您的toggleClass呼叫僅影響單擊專案的內容。擴展此效果的范圍：首先選擇容器元素，然后找到所有相關的“on”元素，以及單擊項下方的“off”元素，并切換它們：
$(this).closest(".faq-text").find(".on")
.add($(this).find(".off"))
.toggleClass("off on")
片段：
$(document).ready(function(){
var nadpis = $('.nadpis');
nadpis.on('click', function () {
$(this).siblings().slideToggle()
$(this).closest(".faq-text").find(".on")
.add($(this).find(".off"))
.toggleClass("off on")
nadpis.not(this).siblings().slideUp();
});
});.textbox p {
display: none;
}
.nadpis {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
gap: 5em;
border-bottom: 1px solid;
}
.off i:nth-child(2) {
display: none;
}
.off i:first-child {
display: block;
}
.on i:nth-child(2) {
display: block;
}
.on i:first-child {
display: none;
}<link href="https://fonts.googleapis.com/css2?family=Kumbh Sans:wght@400;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/7a8caae1e8.js" crossorigin="anonymous"></script>
<section class="faq-content">
<div class="faq-textside">
<div class="faq-text">
<div class="textbox">
<div class="nadpis">
<h2>How many team members can I invite?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p>You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>What is the maximum file upload size?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p> No more than 2GB. All files in your account must fit your allotted storage space.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>How do I reset my password?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p>Click “Forgot password” from the login page or “Change password” from your profile page.
A reset link will be emailed to you.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>Can I cancel my subscription?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p>Yes! Send us a message and we’ll process your request no questions asked.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>Do you provide additional support?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p> Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>無關評論
確保<p>在頁面加載時隱藏所有涉及的元素。在 CSS 中替換這個：
.textbox:first-child p {
display: none;
}
...僅此而已：
.textbox p {
display: none;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/400626.html
標籤：javascript html 查询 css 蠢货
上一篇：設定聊天訊息的順序