在HTML站点的导航栏元素之外单击时，如何关闭打开的折叠导航栏？

// HTML
<nav id="navbar">
  <!-- 导航栏内容 -->
</nav>

<!-- 其他页面内容 -->

// JavaScript
document.addEventListener('click', function(event) {
  var navbar = document.getElementById('navbar');
  var targetElement = event.target; // 获取点击事件的目标元素

  // 如果点击的目标元素不在导航栏内，则关闭导航栏
  if (!navbar.contains(targetElement)) {
    // 关闭导航栏的代码
  }
});

// HTML
<nav id="navbar">
  <!-- 导航栏内容 -->
</nav>

<!-- 其他页面内容 -->

// JavaScript（需要在jQuery库之后引入）
$(document).click(function(event) {
  var navbar = $('#navbar');
  var targetElement = event.target; // 获取点击事件的目标元素

  // 如果点击的目标元素不在导航栏内，则关闭导航栏
  if (!navbar.is(targetElement) && navbar.has(targetElement).length === 0) {
    // 关闭导航栏的代码
  }
});

<!-- HTML -->
<input type="checkbox" id="navbar-toggle">
<nav id="navbar">
  <!-- 导航栏内容 -->
</nav>

<!-- 其他页面内容 -->

<!-- CSS -->
<style>
#navbar {
  /* 导航栏样式 */
  display: none;
}

#navbar-toggle:checked ~ #navbar {
  display: block;
}
</style>