单击不同项目时切换 expand/collapse 箭头

Question

我正在处理简单的常见问题解答部分，需要一点帮助。

问题是当我在问题之间切换时，expand/collapse 箭头将保持向上。你有什么建议吗？

$(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>

此处已满code pen

Answer 1

您的 toggleClass 调用只会影响所点击项目的内容。扩展此效果的范围：首先 select 容器元素，然后找到所有相关的“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;
}

单击不同项目时切换 expand/collapse 箭头

Switching expand/collapse arrows on clicking different item

html

javascript

css

jquery

sass

不相关的评论