Elementor下拉选切换显示/隐藏Section jQuery仅显示单个区块问题

核心错误是违反了HTML基础规范：单个页面内id属性值必须全局唯一。你给同分类下3个Section设置了相同id，jQuery的ID选择器$('#xxx')只会匹配DOM中第一个符合该id的元素，剩余2个同id元素不会被选中，因此切换选项时只能显示1个区块。
除此之外原有代码还有两个逻辑漏洞：

• 初始CSS仅对id为High的区块设置了显示规则，Medium、Low区块的初始隐藏逻辑没有统一收口
• Elementor本身会给每个Section自动生成唯一id，手动设置重复id会和Elementor的内置逻辑冲突，引发其他不可预知的显示问题

1. 调整Section的分类标记（Elementor端操作） #

删除你手动给9个Section设置的重复id，改用CSS类做分组标记——class属性支持重复赋值，完全适合多元素同组的场景：

• 编辑对应Section，在左侧面板「高级」选项卡找到「CSS类」输入框
• 3个High分类Section统一填入：priority-block High
• 3个Medium分类Section统一填入：priority-block Medium
• 3个Low分类Section统一填入：priority-block Low

2. 替换原有CSS代码 #

删除原来写的.content、#High相关样式，替换为以下代码：

/* 默认所有分组区块全部隐藏 */
.priority-block {
    display: none;
}
/* 页面初始加载时默认显示High分类区块 */
.priority-block.High {
    display: block;
}

3. 替换原有jQuery代码 #

把原来通过id匹配元素的逻辑，改为通过class匹配，即可一次性选中同分类下所有3个区块：

jQuery(function($) {
    $('#test').on('change', function() {
        // 先隐藏全部分组区块
        $('.priority-block').hide();
        // 获取当前选中的分类值，匹配对应class显示
        const selected = $(this).val();
        $(`.priority-block.${selected}`).show();
    });
});

代码替换完成后清空页面缓存测试，切换下拉选项时就会一次性展示对应分类下全部3个Section，不会再出现只显示1个的问题。切记后续开发中不要给页面内多个元素设置相同id，所有同组元素的批量控制都优先用class实现。

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