使用两个按钮显示/隐藏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');
}