Bootstrap手风琴点击无法展开内容？求助问题排查与修复

核心问题及修复步骤 #

• 容器标识不匹配：手风琴外层容器类名拼写错误（accordian应为accordion），且未设置对应id="accordion"，导致折叠面板的data-parent="#accordion"无法找到正确的父容器，Bootstrap无法触发折叠交互。需将外层容器修改为<div class="accordion" id="accordion">。
• 标签闭合错误：代码存在两处标签未正确闭合的情况：
  • 阿贡贝的描述中，<em>You click only if you survive my lick. 缺少闭合的</em>标签
  • 阿尔贝托的描述末尾多了一个冗余的</em>标签
• 依赖文件检查：确保页面已正确引入Bootstrap交互所需的JS文件（jQuery、Popper.js和Bootstrap JS），手风琴的展开/折叠功能依赖这些脚本支持。

修复后的完整中文代码 #

<div class="col col-sm order-sm-first col-md">
    <div class="col">
        <h2>企业领导层</h2>
       
        <div class="accordion" id="accordion">
            <div class="card">
                <div class="card-header" role="tab" id="peterhead">
                    <h3 class="mb-0">
                        <a data-toggle="collapse" data-target="#peter">
                        彼得·潘 <small>首席美食官</small>
                        </a>
                    </h3>
                </div>
                <div class="collapse show" id="peter" data-parent="#accordion">
                    <div class="card-body">
                        <p class="d-none d-sm-block">我们的首席执行官彼得将自己的成功归功于勤劳的东亚移民父母，他们历尽艰辛来到美国，只为给孩子最好的未来。母亲在厨房里能用超市便宜买到的食材做出最美味菜肴的“魔法”，是他创造融合菜系的最初灵感，而<em>煎锅餐厅</em>也因此声名远扬。他将对融合菜系的热情带到这家餐厅，开创了跨文化的美食联结。</p>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" role="tab" id="dannyhead">
                    <h3 class="mb-0">
                        <a class="collapsed" data-toggle="collapse" data-target="#danny">
                        达纳塞卡兰·威瑟斯彭 <small>首席食品官</small>
                        </a>
                    </h3>
                </div>
                <div class="collapse" id="danny" data-parent="#accordion">
                    <div class="card-body">
                        <p class="d-none d-sm-block">我们的首席财务官丹尼（同事们都亲切地这么叫他）来自一个有着悠久农耕和农产品传统的家族。在澳大利亚内陆农场长大的经历，让他对各种食物来源有着深刻的欣赏。用他自己的话说：<em>“跑赢一切，留得下来就有回报！”</em></p>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" role="tab" id="agumbehead">
                    <h3 class="mb-0">
                        <a class="collapsed" data-toggle="collapse" data-target="#agumbe">
                        阿贡贝·唐 <small>首席品鉴官</small>
                        </a>
                    </h3>
                </div>
                <div class="collapse" id="agumbe" data-parent="#accordion">
                    <div class="card-body">
                        <p class="d-none d-sm-block">阿贡贝是我们的首席品鉴官，拥有最敏锐的味觉，他亲自确保每一道上桌的菜品都符合他严苛的口味。如果菜品达不到他的标准，厨师们都会害怕他的斥责。他的座右铭是：<em>“只有通过我的品鉴，你才能获得认可。”</em></p>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" role="tab" id="albertohead">
                    <h3 class="mb-0">
                        <a class="collapsed" data-toggle="collapse" data-target="#alberto">
                        阿尔贝托·索马亚 <small>行政总厨</small>
                        </a>
                    </h3>
                </div>
                <div class="collapse" id="alberto" data-parent="#accordion">
                    <div class="card-body">
                        <p class="d-none d-sm-block">阿尔贝托是获奖的三星米其林厨师，拥有丰富的国际经验，曾与烹饪界的顶尖人物密切合作，他擅长打造令人垂涎的印意融合美食。他说：<em>“把两种最具活力的菜系结合起来，你就能创造出爆款！我的天啊！”</em></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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