使用TypeScript实现Bootstrap面板展开折叠遇问题求助

嘿，我来帮你搞定这个TypeScript实现Bootstrap面板折叠无效的问题～

首先得先搞清楚问题根源：你当前的代码用了Bootstrap原生的data-toggle和data-target属性，但如果没正确引入Bootstrap的JavaScript文件（旧版Bootstrap还依赖jQuery），这些属性是不会自动生效的。如果是想完全用TypeScript手动实现折叠逻辑，那咱们可以自己写代码，不依赖Bootstrap的JS。

下面给你两种可行的解决方案：

方案一：让Bootstrap原生折叠功能正常工作 #

如果你想继续用Bootstrap自带的折叠逻辑，需要确保这几点：

• 如果你用的是Bootstrap 3，必须先引入jQuery，再引入Bootstrap的JS文件
• 如果你用的是Bootstrap 5，直接引入Bootstrap的JS文件即可（已经不依赖jQuery）
• 确保页面DOM加载完成后，Bootstrap能完成初始化

在你的TypeScript文件里，可以加个DOM加载完成的监听，确保初始化时机正确：

document.addEventListener('DOMContentLoaded', () => {
  // Bootstrap会自动扫描页面上带data-toggle="collapse"的元素并初始化
  console.log('页面加载完成，Bootstrap折叠组件已初始化');
});

方案二：纯TypeScript手动实现折叠功能 #

如果不想依赖Bootstrap的JS，咱们自己写逻辑来控制面板的显示隐藏，灵活性更高：

第一步：HTML结构（可以保留原有结构，去掉data属性也没问题） #

<div class="panel panel-white">
  <div class="panel-heading removeColor" id="passins_heading">
    <h6 class="panel-title">
      <button class="collapsed" id="openPassion">Click Here</button>
    </h6>
  </div>
  <div id="Passions" class="panel-collapse collapse">
    <div class="panel-body">
      这里是你的面板内容...
    </div>
  </div>
</div>

第二步：TypeScript逻辑代码 #

// 获取按钮和面板DOM元素，做类型断言避免TypeScript报错
const toggleButton = document.getElementById('openPassion') as HTMLButtonElement;
const panelContent = document.getElementById('Passions') as HTMLElement;

// 确保元素存在再绑定事件
if (toggleButton && panelContent) {
  toggleButton.addEventListener('click', () => {
    // 切换Bootstrap的collapse类，控制面板显示/隐藏
    panelContent.classList.toggle('collapse');
    // 切换按钮的collapsed类，用来标识当前状态（方便做样式切换，比如箭头翻转）
    toggleButton.classList.toggle('collapsed');
  });
}

小说明： #

• Bootstrap的collapse类默认是display: none，移除它面板就会显示，加上就隐藏
• collapsed类可以用来给按钮做状态区分，比如你可以给这个类加个箭头向上/向下的样式
• TypeScript里给DOM元素加as HTMLButtonElement这种类型断言，是为了让TypeScript识别元素的类型，避免调用方法或属性时出现类型错误

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