Bootstrap折叠面板contenteditable元素空值验证失效问题咨询

核心错误原因 #

contenteditable="true" 是普通DOM元素的可编辑属性，对应的节点不属于<input>、<textarea>这类表单控件，jQuery的val()方法仅支持读取表单元素的值，用到普通可编辑DOM上时返回值不符合预期，所以$(this).val() != ''的判断永远成立，不会进入else分支。

其他存在的问题 #

• 可编辑区域清空后可能残留空白字符、换行符或者浏览器自动插入的空标签，直接取内容判空依然会失效，需要先去除首尾空白再判断。
• 样式处理逻辑异常：else分支的attr('style')仅为读取属性的用法，未传入第二个参数不会清除样式；直接拼接style属性会导致样式重复叠加，更推荐用css()方法单独控制背景色，不会影响按钮原有其他样式。
• 循环生成卡片的场景下不能使用重复id，你代码中按钮固定id="infobtn"会导致后续选择器匹配错误，建议替换为class选择器。
• HTML代码中按钮的type属性错误填写了Bootstrap的类名，data-bs-target属性多写了多余的>符号，会导致折叠面板触发异常。

修正后代码 #

JS代码（适配动态生成元素，用事件委托绑定） #

$(document).on('focusout', '.accordion-body', function() {
  // 去除内容首尾空白后判空
  const editContent = $(this).text().trim();
  const $targetBtn = $(this).closest('.accordion-item').find('.infobtn');
  if (editContent !== '') {
    $targetBtn.css('background-color', '#f4cccc');
  } else {
    // 清空背景色
    $targetBtn.css('background-color', '');
  }
});

修正后的HTML按钮部分 #

<button class="accordion-button collapsed infobtn" name="infobtn" style="height:25px; <?php if (!empty($additionalInfo)) echo " background-color: #f4cccc; " ?>" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">Additional Info
</button>

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