ATABC会员门户页面Accordion点击事件失效问题求助

问题原因分析 #

1. 内部按钮的事件干扰：.accordion-header里嵌套了<button>标签，点击时实际触发的是按钮的默认交互行为，会干扰外层容器的点击事件响应。
2. 动态元素绑定时机问题：从代码里的$i变量能看出手风琴是循环动态渲染的，如果JS代码在DOM元素生成前就执行，直接用.click()绑定事件会失效，因为此时目标元素还未存在于DOM中。

修复方案 #

方案1：绑定到实际交互元素（推荐） #

直接把点击事件绑定到内部的按钮上，既符合无障碍设计逻辑（代码里已添加aria-*属性），也能避免事件干扰：

$(document).ready(function() {
  $('.accordion-body').css('display', 'none');
  $('.accordion-header').addClass('accordion-closed');

  $('.accordion-control').click(function (e) {
    // 阻止按钮默认行为，避免不必要的页面跳转或表单提交
    e.preventDefault();
    const $header = $(this).closest('.accordion-header');
    const $body = $header.next('.accordion-body');

    if ($body.is(':visible')) {
      $body.slideUp();
      $header.removeClass('accordion-opened').addClass('accordion-closed');
    } else {
      $('.accordion-body').slideUp();
      $body.slideDown();
      $header.addClass('accordion-opened').removeClass('accordion-closed');
      $('.accordion-header').not($header).removeClass('accordion-opened').addClass('accordion-closed');
    }
  });
});

方案2：事件委托适配动态渲染 #

如果手风琴是通过AJAX或延迟加载生成的，用事件委托绑定到父级容器，确保元素渲染后事件依然生效：

$(document).ready(function() {
  $('.accordion-body').css('display', 'none');
  $('.accordion-header').addClass('accordion-closed');

  // 替换成手风琴列表的实际父容器选择器（比如包裹li的ul）
  $('.accordion-container').on('click', '.accordion-header', function (e) {
    e.preventDefault();
    const $body = $(this).next('.accordion-body');

    if ($body.is(':visible')) {
      $body.slideUp();
      $(this).removeClass('accordion-opened').addClass('accordion-closed');
    } else {
      $('.accordion-body').slideUp();
      $body.slideDown();
      $(this).addClass('accordion-opened').removeClass('accordion-closed');
      $('.accordion-header').not(this).removeClass('accordion-opened').addClass('accordion-closed');
    }
  });
});

额外检查项 #

• 确认jQuery已正确引入，且代码放在$(document).ready()回调中，保证DOM加载完成后再执行事件绑定。
• 排查是否有其他JS代码使用e.stopPropagation()阻止了事件冒泡，导致.accordion-header无法接收点击事件。

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