如何在单击外部时自动关闭手风琴

<div class="accordion">
  <div class="item">
    <div class="header">折叠项1</div>
    <div class="content">折叠项1的内容</div>
  </div>
  <div class="item">
    <div class="header">折叠项2</div>
    <div class="content">折叠项2的内容</div>
  </div>
  <div class="item">
    <div class="header">折叠项3</div>
    <div class="content">折叠项3的内容</div>
  </div>
</div>

$(document).on('click', function(event) {
  var target = $(event.target);
  
  // 检查点击的目标元素是否在手风琴的外部区域
  if (!target.closest('.accordion').length) {
    // 关闭手风琴的所有折叠项
    $('.accordion .item').removeClass('active');
  }
});

$('.accordion .header').on('click', function() {
  var item = $(this).parent('.item');
  
  // 切换当前点击的折叠项的状态
  item.toggleClass('active');
  
  // 关闭其他折叠项
  item.siblings('.item').removeClass('active');
});