在导航栏外部单击时如何关闭导航栏

// HTML
<div id="navbar">导航栏内容</div>
<div id="content">页面内容</div>

// JavaScript
var navbar = document.getElementById("navbar");
var content = document.getElementById("content");

document.addEventListener("click", function(event) {
  var target = event.target;
  if (target !== navbar && target !== content) {
    // 关闭导航栏的操作
    navbar.style.display = "none";
  }
});

<style>
  .navbar {
    display: none;
  }
  .show-navbar {
    display: block;
  }
</style>

<div id="navbar" class="navbar">导航栏内容</div>
<div id="content">页面内容</div>

<script>
  var navbar = document.getElementById("navbar");
  var content = document.getElementById("content");

  document.addEventListener("click", function(event) {
    var target = event.target;
    if (target !== navbar && target !== content) {
      // 关闭导航栏的操作
      navbar.classList.remove("show-navbar");
    }
  });
</script>