如何使用JavaScript动态触发cq-toggle元素的点击事件？

手动点击cq-toggle菜单项时，该元素会被添加active类，同时文档中会新增一个div。但通过JavaScript动态触发点击时，以下两种方法均无效：

目标HTML结构 #

<div class="ciq-menu-section">
    <div class="ciq-dropdowns">
        <cq-toggle class="ciq-DT tableview-ui" cq-member="tableView">
              <span></span>
              <cq-tooltip>
                 <translate original="Table View">Table View</translate>
              </cq-tooltip>
        </cq-toggle>
    </div>
</div>

尝试过的无效代码 #

代码1：调用click()方法 #

const tableViewToggle = frameDocument.querySelector(".tableview-ui")
tableViewToggle.click();

代码2：直接切换active类 #

tableViewToggle.classList.toggle('active');

有效解决方法 #

1. 手动分发原生点击事件 #

部分自定义元素不会响应默认的click()方法，需要创建标准的鼠标事件并分发：

const tableViewToggle = frameDocument.querySelector(".tableview-ui");
const clickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: frameDocument.defaultView
});
tableViewToggle.dispatchEvent(clickEvent);

2. 调用组件内置的切换方法 #

从cq-member="tableView"属性可以看出，这个cq-toggle属于CIQ组件的一部分，可尝试直接调用组件的切换逻辑：

const tableViewToggle = frameDocument.querySelector(".tableview-ui");
// 调用组件的toggle方法，或对应tableView的切换函数
if (tableViewToggle.node && tableViewToggle.node.toggle) {
    tableViewToggle.node.toggle();
}

3. 确保元素完成初始化 #

如果元素是动态加载的，需等待DOM完全渲染后执行代码：

frameDocument.addEventListener('DOMContentLoaded', () => {
    const tableViewToggle = frameDocument.querySelector(".tableview-ui");
    if (tableViewToggle) {
        tableViewToggle.dispatchEvent(new MouseEvent('click', { bubbles: true }));
    }
});

4. 同步状态与DOM修改 #

若仅切换active类无法触发完整逻辑，可手动模拟DOM变化：

const tableViewToggle = frameDocument.querySelector(".tableview-ui");
tableViewToggle.classList.toggle('active');
// 手动创建并插入新增的div（需匹配原逻辑生成的结构）
const tableDiv = frameDocument.createElement('div');
tableDiv.className = 'ciq-tableview'; // 替换为实际类名
frameDocument.querySelector('合适的父容器').appendChild(tableDiv);

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