看起来你已经搞定了前两种关闭逻辑，卡在点击外部区域关闭这一步了对吧？咱们来分析下问题出在哪，然后快速修复它。

问题根源 #

你原来注释的代码有两个核心问题：

• 你监听的是.pageContainer的点击，但按钮本身就在这个容器里，点击按钮打开导航时，这个事件也会被触发，导致导航刚打开就立刻关闭，逻辑冲突。
• 没有考虑事件冒泡：点击导航内部或者按钮时，事件会向上冒泡到document，如果你直接监听document的点击，会误触发关闭逻辑。

修复方案 #

我们需要做两个关键调整：

1. 监听document的点击事件，而不是特定容器，这样能覆盖所有外部区域的点击。
2. 在按钮和导航内部的点击事件中阻止事件冒泡，避免触发document的关闭逻辑。
3. 简化判断条件：flag和showMenu类是同步状态，只需要判断其中一个即可（推荐用类的存在性，更直观）。

完整修复后的代码 #

JavaScript

$(document).ready(function() {
  var button = $('.button');
  var ocn = $('.ocn');
  var test = $('.test');
  var flag = false;

  // 点击按钮切换导航
  button.click(function(e) {
    // 阻止事件冒泡到document
    e.stopPropagation();
    if (!flag) {
      ocn.addClass('showMenu');
      flag = true;
    } else {
      ocn.removeClass('showMenu');
      flag = false;
    }
  });

  // 点击导航内链接关闭
  test.click(function(e) {
    // 阻止事件冒泡到document
    e.stopPropagation();
    ocn.removeClass('showMenu');
    flag = false;
  });

  // 点击外部区域关闭导航
  $(document).on('click', function() {
    if (ocn.hasClass('showMenu')) {
      ocn.removeClass('showMenu');
      flag = false;
    }
  });

  // 额外：点击导航本身也阻止冒泡，避免误关闭
  ocn.click(function(e) {
    e.stopPropagation();
  });
});

CSS（保持你的原有代码不变）

* {
  padding: 0;
  margin: 0;
}
.ocn {
  position: absolute;
  left: -300px;
  top: 0;
  width: 300px;
  height: 100vh;
  background-color: #ccc;
  transition: left .2s ease;
  z-index: 2;
  border: 1px solid;
}
.showMenu {
  left: 0px;
}
.pageContainer {
  height: 500px;
  width: 1000px;
  border: 1px solid;
  display: block;
  margin: 0 auto;
}
.button {
  height: 40px;
  width: 40px;
  border: 1px dashed;
  display: block;
  position: relative;
  left: 400px;
  cursor: pointer;
}
.test {
  cursor: pointer;
}

HTML（保持你的原有代码不变）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ocn">
  <p class="test">here is some text for the menu</p>
</div>
<div class="pageContainer">
  <div class="button"></div>
</div>

关键修改点解释 #

• e.stopPropagation()：在按钮、导航内链接、导航容器的点击事件中添加这个方法，阻止事件向上冒泡到document，这样点击这些元素时不会触发外部关闭的逻辑。
• 监听document点击：这样不管点击页面的任何外部区域（除了导航和按钮），都会触发关闭逻辑。
• 简化状态判断：直接用ocn.hasClass('showMenu')来判断导航是否展开，比同时判断flag更可靠，避免状态不同步的问题。

这样调整后，三种关闭逻辑就都能正常工作啦：点击按钮切换、点击导航内链接关闭、点击外部区域关闭。

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