Elementor手风琴内容为空时隐藏对应标签的代码不生效怎么办

• 执行时机错位：Elementor手风琴组件、WooCommerce商品信息内容均为前端动态渲染，原脚本如果在DOM未完全加载时就执行，选择器会匹配不到任何元素，自然不会生效
• 选择器匹配规则失效：:empty 仅能匹配完全无任何子节点、无文本的空元素，实际场景中WooCommerce输出空内容区时，往往会附带换行、缩进空格、零宽文本节点，不属于严格意义上的:empty可匹配范围
• 控制逻辑冗余易断连：原代码单独拆分隐藏内容区父元素、再逐次找相邻的h5标题隐藏，只要DOM层级有细微调整（比如Elementor版本迭代调整组件结构），选择器链路就会断开，无法实现整体隐藏的效果

按照以下逻辑调整即可实现预期效果：

1. 等待DOM完全加载后再执行判断流程，避免动态组件未渲染就执行选择匹配
2. 优化空内容判定规则：过滤掉纯空白、换行、零宽字符后，只要实际可见文本长度为0，就判定为空内容
3. 增加动态内容监听：由于手风琴内容是自动拉取WooCommerce商品信息异步填充的，需要监听容器内的内容变化，等商品字段填充完成后再做空值判断，避免异步加载带来的判断偏差
4. 直接对整个.elementor-accordion-item做显示/隐藏控制，无需拆分操作标题和内容区，减少选择器出错概率

jQuery(document).ready(function($){
  const $accordionContainer = $('.elementor-accordion');
  if (!$accordionContainer.length) return;

  // 空内容校验逻辑
  function validateAccordionItems() {
    $accordionContainer.find('.elementor-accordion-item').each(function(){
      const $currentItem = $(this);
      // 定位当前item下的内容面板，排除标题节点
      const $contentPanel = $currentItem.children('div').not('.elementor-accordion-title');
      // 过滤所有空白字符、零宽字符后判断实际文本长度
      const realContentText = $contentPanel.text().replace(/[\s\u200B-\u200D\uFEFF]/g, '');
      
      realContentText ? $currentItem.show() : $currentItem.hide();
    })
  }

  // 初始加载完成先执行一次校验
  validateAccordionItems();

  // 监听容器内容变化，适配WooCommerce异步填充商品信息的场景
  const contentObserver = new MutationObserver(() => {
    validateAccordionItems();
  });
  contentObserver.observe($accordionContainer[0], {
    childList: true,
    subtree: true,
    characterData: true
  });
});

• 脚本建议通过Elementor内置的自定义代码模块引入，选择页面底部加载，保证jQuery、Elementor、WooCommerce核心JS资源先完成加载，避免依赖缺失
• 后续如果Elementor版本调整了手风琴组件的类名，仅需修改代码中对应的选择器即可，核心判断逻辑无需改动

内容的提问来源于stack exchange，提问作者Cristihan González