用两个按钮显示/隐藏div

Question

我有两个按钮createChatWindow和openSettings。每个按钮显示一个div。我希望div在其外部被点击时被隐藏。我的问题是，当我点击其他地方时，div会关闭，但会显示另一个。

这是我的HTML：

<div class="chat-threads" id="chat-threads">
    <button class="top-bar-btn create"
            (click)="createChatWindow()">
      <i class="fa fa-pencil-square-o"></i>
    </button>

    <button class="top-bar-btn settings"
            (click)="openSettings()">
      <i class="fa fa-cog"></i>
    </button>

    <div id="outside" (click)="hide()"></div>
</div>

我的.ts：

hide(): void {
  document.getElementById('outside').style.display = 'none';
  document.getElementById('chat-threads').classList.toggle('display-settings');
  document.getElementById('chat-threads').classList.toggle('display-new-chat-window');
}

openSettings(): void {
  document.getElementById('outside').style.display = 'block';
  document.getElementById('chat-threads').classList.toggle('display-settings');
}

createChatWindow(): void {
  document.getElementById('outside').style.display = 'block';
  document.getElementById('chat-threads').classList.toggle('display-new-chat-window');
}

Answer 1

当你点击外面，所以在hide()函数中，不要使用toggle，使用remove：

hide(): void {
  document.getElementById('outside').style.display = 'none';
  document.getElementById('chat-threads').classList.remove('display-settings');
  document.getElementById('chat-threads').classList.remove('display-new-chat-window');
}