HTML按钮切换类需两次点击？求代码排查与修复指导

问题原因 #

• 错误遍历所有下拉按钮：函数每次触发都会遍历所有.dropdown按钮，批量操作所有组件状态，完全偏离了“点击哪个切换哪个”的需求，直接导致状态混乱。
• this指向错误：循环内的this并未指向当前遍历的按钮，而是全局window对象，第一次点击时根本没切换到目标按钮的图标，自然需要二次点击才能触发预期效果。
• 行内样式判断失效：初始状态下.content的height没有设置行内样式，content.style.height为空字符串，第一次点击会进入else分支设为auto，和你预期的“初始收起（75px）”逻辑颠倒，导致状态切换异常。

修复方案 #

直接利用onclick传入的element参数（即当前点击的按钮），仅处理当前组件，同时改用CSS类控制展开/收起状态，避免行内样式的判断问题：

修复后的JS代码 #

function dropdownbuttonclick(element) {
  // 切换当前按钮的图标类
  $(element.firstChild).toggleClass('fa-chevron-down fa-chevron-up');
  // 获取当前按钮对应的内容区
  const content = element.nextElementSibling;
  
  // 用class控制展开/收起，比直接操作行内样式更可靠
  content.classList.toggle('expanded');
}

新增CSS样式（控制展开收起状态） #

.content {
  height: 75px; /* 默认收起状态 */
  overflow: hidden; /* 隐藏超出内容 */
  transition: height 0.3s ease; /* 可选：添加过渡动画提升体验 */
}

.content.expanded {
  height: auto;
}

模板代码无需修改 #

if (row.description.length > 50) {
  return "<div width='100%' style='min-height:100px;" + backgrnd + "'><button type='button' class='dropdown' onclick='dropdownbuttonclick(this)'><i class='fa fa-solid fa-chevron-down'></i></button><div class='content' style='margin:20px;'>" + title + "</div></div>";
}

额外说明 #

• 用CSS类控制状态更易维护，还能轻松添加过渡动画优化交互；
• 移除了不必要的循环，仅操作当前点击元素，彻底避免批量操作导致的状态混乱；
• 明确使用传入的element参数，解决了this指向错误问题，确保每次点击都能正确切换目标按钮的图标。

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