手风琴组件点击按钮/图标无响应，手动设置aria-expanded正常

核心原因是JavaScript代码执行时机过早：你的JS代码放在<head>标签内，此时页面DOM还未完全加载完成，document.querySelectorAll(".accordion button")无法获取到任何按钮元素，自然无法绑定点击事件，导致点击后没有反应。

解决方案 #

方案1：将JS代码移到<body>末尾 #

把脚本放在</body>标签之前，确保DOM全部加载完成后再执行代码：

<!DOCTYPE html>
<html>
    <head>
        <title>FAQ</title>
        <link rel="stylesheet" href="style.css">
        <link rel="icon" type="image/x-icon" href="ice_cream.png">
    </head>
    <body>
        <div id="navbar">
            <ul id="ul-nav">
                <li class="li-nav"><a href="">Home</a></li>
                <li class="li-nav"><a href="">About</a></li>
                <li class="li-nav"><a href="">Gallery</a></li>
                <li class="li-nav"><a href="">Reviews</a></li>
                <li class="li-nav"><a href="faq.html">FAQ</a></li>
                <li class="li-nav"><a href="contact.html">Contact</a></li>
            </ul>
        </div>

        <div class="container">
            <h2>Frequently Asked Questions</h2>
            <div class="accordion">
                <div class="accordion-item">
                    <button id="accordion-button-1" aria-expanded="false"><span class="accordion-title">When are you guys open?</span><span class="icon" aria-hidden="true"></span></button>
                    <div class="accordion-content">
                        <p>We are open every day of the week from 10am to 8pm.We are open every day of the week from 10am to 8pm.</p>
                    </div>
                </div>
                <div class="accordion-item">
                    <button id="accordion-button-2" aria-expanded="false"><span class="accordion-title">When are you guys open?</span><span class="icon" aria-hidden="true"></span></button>
                    <div class="accordion-content">
                        <p>We are open every day of the week from 10am to 8pm.</p>
                    </div>
                </div>
                <div class="accordion-item">
                    <button id="accordion-button-3" aria-expanded="false"><span class="accordion-title">When are you guys open?</span><span class="icon" aria-hidden="true"></span></button>
                    <div class="accordion-content">
                        <p>We are open every day of the week from 10am to 8pm.</p>
                    </div>
                </div>
                <div class="accordion-item">
                    <button id="accordion-button-4" aria-expanded="false"><span class="accordion-title">When are you guys open?</span><span class="icon" aria-hidden="true"></span></button>
                    <div class="accordion-content">
                        <p>We are open every day of the week from 10am to 8pm.</p>
                    </div>
                </div>
                <div class="accordion-item">
                    <button id="accordion-button-5" aria-expanded="false"><span class="accordion-title">When are you guys open?</span><span class="icon" aria-hidden="true"></span></button>
                    <div class="accordion-content">
                        <p>We are open every day of the week from 10am to 8pm.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 把JS移到body末尾 -->
        <script type="text/javascript">
            const items = document.querySelectorAll(".accordion button");

            function toggleAccordion() {
                const itemToggle = this.getAttribute('aria-expanded');
  
                for (let i = 0; i < items.length; i++) {
                    items[i].setAttribute('aria-expanded', 'false');
                }

                if (itemToggle == 'false') {
                    this.setAttribute('aria-expanded', 'true');
                }
            }

            items.forEach(item => item.addEventListener('click', toggleAccordion));
        </script>
    </body>
</html>

方案2：使用DOMContentLoaded事件包裹代码 #

如果不想移动脚本位置，可以用DOMContentLoaded事件确保DOM加载完成后再执行代码：

document.addEventListener('DOMContentLoaded', function() {
    const items = document.querySelectorAll(".accordion button");

    function toggleAccordion() {
        const itemToggle = this.getAttribute('aria-expanded');
  
        for (let i = 0; i < items.length; i++) {
            items[i].setAttribute('aria-expanded', 'false');
        }

        if (itemToggle == 'false') {
            this.setAttribute('aria-expanded', 'true');
        }
    }

    items.forEach(item => item.addEventListener('click', toggleAccordion));
});

额外注意事项 #

1. id唯一性：原代码中所有按钮的id都是accordion-button-1，HTML中id必须唯一，已在方案1中修正为递增的唯一id。
2. CSS语法问题：你的CSS使用了嵌套语法（如.accordion .accordion-item内部嵌套button样式），这是SCSS/Sass专属语法，浏览器无法直接识别。需要将其编译为普通CSS，或者改用平铺式写法。

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