JavaScript实现单次问答切换：点击新问题时旧问题隐藏求助

Got it, let's get that FAQ accordion working so only one question's content is visible at a time. Here's a complete, tested solution with explanations tailored to your needs:

Step 1: Updated HTML Structure #

First, make sure your FAQ items have a clear, accessible structure. Using buttons for headers ensures keyboard navigation works properly:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FAQs</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="faq-container">
        <!-- FAQ Item 1 -->
        <div class="faq-item">
            <button class="faq-header">Question 1: How do I reset my password?</button>
            <div class="faq-content">
                <p>To reset your password, go to the login page and click "Forgot Password". Follow the instructions sent to your email.</p>
            </div>
        </div>

        <!-- FAQ Item 2 -->
        <div class="faq-item">
            <button class="faq-header">Question 2: Can I change my username?</button>
            <div class="faq-content">
                <p>Unfortunately, usernames cannot be changed once created. You will need to create a new account if you want a different username.</p>
            </div>
        </div>

        <!-- Add more FAQ items as needed -->
    </div>
    <script src="faqs.js"></script>
</body>
</html>

Step 2: CSS for Visibility & Transitions #

Add this to main.css to handle hiding/showing content with smooth animations:

.faq-container {
    max-width: 800px;
    margin: 2rem auto;
    font-family: Arial, sans-serif;
}

.faq-item {
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.faq-header {
    width: 100%;
    padding: 1rem;
    background-color: #f8f8f8;
    border: none;
    text-align: left;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.faq-header:hover {
    background-color: #e9e9e9;
}

/* Hide content by default */
.faq-content {
    padding: 0 1rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

/* Show content when active class is added */
.faq-content.active {
    max-height: 200px; /* Adjust based on your content length */
    padding: 1rem;
}

Step 3: JavaScript to Control Single-Open Behavior #

This is the core logic to ensure only one FAQ is open at a time. Add this to faqs.js:

// Wait for the DOM to fully load before running scripts
document.addEventListener('DOMContentLoaded', function() {
    // Get all FAQ headers
    const faqHeaders = document.querySelectorAll('.faq-header');

    faqHeaders.forEach(header => {
        header.addEventListener('click', function() {
            // Get the content section linked to this header
            const targetContent = this.nextElementSibling;
            // Check if the content is already open
            const isCurrentlyOpen = targetContent.classList.contains('active');

            // First, close ALL open FAQ contents
            document.querySelectorAll('.faq-content').forEach(content => {
                content.classList.remove('active');
            });

            // If the clicked content wasn't open, open it; else leave it closed
            if (!isCurrentlyOpen) {
                targetContent.classList.add('active');
            }
        });
    });
});

How This Works: #

1. DOMContentLoaded: Ensures we don't try to interact with elements before they're loaded.
2. Close All First: Every time a header is clicked, we hide all open content sections by removing the active class.
3. Toggle Clicked Item: If the clicked header's content was closed, we open it; if it was open, we leave it closed (so you can collapse all FAQs too).

Adapting to Your Existing Code: #

If your current HTML uses different class names or element structures (e.g., content is a child instead of sibling), adjust the selectors:

• Replace .faq-header with your header class.
• Replace nextElementSibling with the correct way to target your content (e.g., this.parentElement.querySelector('.your-content-class')).

内容的提问来源于stack exchange，提问作者DayJa Lowe