手风琴点击折叠切换背景色 实现首次加载取消背景色及点击外部关闭

问题1：取消页面首次加载时的默认激活背景色 #

原因 #

初始状态下你未给折叠触发的<a>标签添加collapsed类，导致CSS规则.med-header a:not(.collapsed)在页面加载时直接命中元素，触发了激活态的背景色样式。

修复方案 #

1. 修改HTML中触发链接的类，添加collapsed：

<!-- 修改前 -->
<a data-toggle="collapse" class="text-decoration-none" href="#section-1">
<!-- 修改后 -->
<a data-toggle="collapse" class="text-decoration-none collapsed" href="#section-1">

2. 可选优化：给触发链接添加过渡属性，让背景色、文字色切换更流畅，修改CSS如下：

.med-header a {
    display: block;
    position: relative;
    /* 新增过渡效果 */
    transition: all 0.3s ease;
}

问题2：点击手风琴外部区域自动关闭已展开项 #

实现代码（基于Bootstrap折叠组件依赖的jQuery编写） #

$(document).on('click', function(e) {
  // 判断点击区域是否在手风琴组件外
  if (!$(e.target).closest('#accordion').length) {
    // 关闭所有已展开的折叠项
    $('#accordion .collapse.show').collapse('hide');
  }
});

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