如何并行触发所有匹配元素的点击函数？

你遇到的问题核心在于默认的点击事件处理器自带「排他展开」逻辑——每次点击都会先关闭所有已展开的项，再展开当前项，所以用$('.accordion__indicator').click()逐个触发时，前面展开的项会被后面的点击操作关掉，最后只剩最后一个展开。

要绕开这个联动关闭逻辑，最直接的方式是跳过点击事件，直接修改元素的展开状态，而不是触发会触发排他逻辑的点击事件。下面给你几种可行的方案：

方案1：直接操作DOM样式/类（最稳妥） #

大部分Accordion组件都是通过给元素添加/移除类来控制展开/收起状态的，比如：

• 指示器（.accordion__indicator）会加active类来显示展开状态的图标（比如箭头向下）
• 下拉内容区（通常是.accordion__content或类似类名）会通过display:block/none或者height:auto/0来控制显示隐藏

你可以直接给所有相关元素设置展开状态：

// 给所有指示器标记为激活状态
$('.accordion__indicator').addClass('active');
// 让所有下拉内容区显示出来
$('.accordion__content').css('display', 'block');
// 如果是通过height控制的，就改成对应的展开值，比如：
// $('.accordion__content').css('height', 'auto');

方案2：临时解绑事件再触发（适合不知道具体状态逻辑的情况） #

如果不清楚组件用了哪些类或样式，可以先把默认的点击事件解绑，这样触发click时就不会执行排他关闭逻辑，之后再重新绑定事件：

// 先保存原来的点击事件处理器，同时解绑事件
const clickHandler = $('.accordion__indicator').off('click').data('events')?.click[0]?.handler;
// 此时触发click不会有排他逻辑，所有项都会展开
$('.accordion__indicator').click();
// 重新绑定原来的事件处理器，保证后续手动点击仍能正常工作
$('.accordion__indicator').on('click', clickHandler);

注意：这个方法依赖jQuery的data('events')属性，不同jQuery版本可能有差异，优先用方案1。

方案3：调用组件原生展开方法（如果用了现成框架） #

如果你的Accordion是用Bootstrap、jQuery UI这类框架实现的，可以直接调用框架提供的展开方法，比如Bootstrap的Collapse组件：

// 遍历所有Accordion项，调用show方法（toggle:false表示只展开，不切换）
$('.accordion-item').each(function() {
  new bootstrap.Collapse(this, { toggle: false }).show();
});

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