Bootstrap Accordion头部含输入框：点击及空格键误触展开收起如何阻止？

你遇到的问题根源是输入框嵌套在折叠面板的触发按钮（.accordion-button）内部：点击输入框的事件会向上冒泡到按钮，触发折叠逻辑；在输入框按下空格键时，按钮会捕获到按键事件并触发点击行为。下面提供两种解决思路：

方法一：用JavaScript阻止事件冒泡 #

给输入框绑定事件，阻止点击和空格键事件向上传递到按钮，同时保留输入框本身的输入功能：

原生JavaScript实现 #

// 选中所有折叠面板头部的输入框
document.querySelectorAll('.accordion-header .form-control').forEach(input => {
    // 阻止点击事件冒泡到上级按钮
    input.addEventListener('click', e => e.stopPropagation());
    
    // 处理空格键事件，阻止冒泡但保留输入空格的功能
    input.addEventListener('keydown', e => {
        if (e.key === ' ') {
            e.stopPropagation();
        }
    });
});

jQuery实现（如果项目已引入jQuery） #

$('.accordion-header .form-control')
    .on('click', e => e.stopPropagation())
    .on('keydown', e => {
        if (e.key === ' ') {
            e.stopPropagation();
        }
    });

方法二：调整HTML结构（更彻底的方案） #

把输入框从.accordion-button内部移出来，让按钮只负责触发折叠，输入框独立存在于头部容器中，从根源避免事件冲突：

.accordion
  .accordion-item
    %h2.accordion-header.d-flex.align-items-center
      %button.accordion-button.flex-shrink-0
        = level.name
      .col-9.ms-3
        = hypothesis_form.text_field :description, class: 'form-control'
    %div{ id: "structure-level-#{hypothesis.id}", class: 'accordion-collapse collapse show' }
      .accordion-body
        = render partial: '...', locals: { ... }

这种方式不需要额外JS，通过Bootstrap的flex布局类（d-flex、align-items-center等）就能保持原有的排版效果。

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