如何创建可切换展开/收缩状态的按钮？现有代码点击无响应

你的代码逻辑存在核心问题：两个if语句是在按钮创建完成后立即同步执行的，此时按钮的class是listButton，所以只有第一个点击事件被绑定到按钮上；第二个if的条件（expandButton.className == 'listButtonClicked'）在初始化时不成立，因此这段代码完全没有执行，既不会绑定切换class的事件，也不会触发console.log('active')。

当你第一次点击按钮，class被改成listButtonClicked，但此时没有任何事件监听这个状态下的点击行为，所以再次点击没有反应。

不需要分开绑定两个事件，只需要在同一个点击事件回调里判断当前状态，完成class切换、文本修改和div的展开/收缩逻辑：

// 先创建需要控制的目标div
let contentDiv = document.createElement('div');
contentDiv.textContent = '这是要展开/收缩的内容';
contentDiv.style.display = 'none'; // 初始设置为隐藏
document.body.appendChild(contentDiv);

// 创建按钮
let expandButton = document.createElement('button');
expandButton.className = 'listButton';
expandButton.textContent = 'Expand';

// 绑定单个点击事件处理所有切换逻辑
expandButton.addEventListener('click', (e) => {
  // 判断当前按钮的状态
  if (expandButton.classList.contains('listButton')) {
    // 切换到收缩状态
    expandButton.classList.remove('listButton');
    expandButton.classList.add('listButtonClicked');
    expandButton.textContent = 'Shrink';
    contentDiv.style.display = 'block'; // 展开div
  } else {
    // 切换回展开状态
    expandButton.classList.remove('listButtonClicked');
    expandButton.classList.add('listButton');
    expandButton.textContent = 'Expand';
    contentDiv.style.display = 'none'; // 收缩div
  }
});

document.body.appendChild(expandButton);

• 用classList.contains()判断元素class，比直接比较className更可靠（避免多个class共存时的字符串匹配问题）
• 单个事件回调统一处理双向切换逻辑，不需要在初始化阶段做无效的条件判断
• 同步管理按钮文本、class和目标div的显示状态，逻辑更清晰易维护

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