head引入外部JS的手风琴菜单仅第二次点击生效如何解决

你当前的JS逻辑存在嵌套事件绑定问题：
第一次点击按钮触发openaccordion()时，仅完成了给所有手风琴按钮注册点击事件回调的操作，没有直接执行展开/收起的核心逻辑，所以第一次点击无可见效果，第二次点击才会触发首次调用时注册的回调函数，产生响应。
同时你已经在HTML标签上通过onclick属性绑定了触发函数，无需在JS中二次绑定点击事件，属于冗余逻辑。

1. 修改HTML的onclick传参 #

给每个按钮的onclick调用传入当前触发元素this，方便JS直接获取点击的按钮对象：

<button class="course-accordion" onclick="openaccordion(this)">Title 1</button>
<div class="course-panel">Text 1</div>
<button class="course-accordion" onclick="openaccordion(this)">Title 2</button>
<div class="course-panel">Text 2</div>
<button class="course-accordion" onclick="openaccordion(this)">Title 3</button>
<div class="course-panel">Text 3</div>

2. 替换为修复后的JS代码 #

删除原有嵌套绑定逻辑，直接执行展开/收起逻辑：

function openaccordion(activeBtn) {
    // 获取当前点击按钮对应的面板
    const currentPanel = activeBtn.nextElementSibling;
    const allPanels = document.getElementsByClassName("course-panel");
    const allAccordions = document.getElementsByClassName("course-accordion");

    // 当前面板已展开则直接收起
    if (currentPanel.style.maxHeight) {
        currentPanel.style.maxHeight = null;
        activeBtn.classList.remove("active");
        return;
    }

    // 先清空所有面板的展开状态、移除所有按钮激活样式
    for (let i = 0; i < allAccordions.length; i++) {
        allAccordions[i].classList.remove("active");
        allPanels[i].style.maxHeight = null;
    }

    // 展开当前点击的面板、添加激活样式
    currentPanel.style.maxHeight = currentPanel.scrollHeight + "px";
    activeBtn.classList.add("active");
}

修复后JS文件依旧可以放在<head>标签中引入，因为函数仅在用户点击时调用，此时DOM已渲染完成，不会出现元素获取失败的问题，完全符合你的要求。

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