用两个按钮显示/隐藏div

Question

I have two buttons createChatWindow and openSettings . Each button displays a div. I want the div to be hidden when clicked outside of it. My problem is that when I click elsewhere the div is closed but the other one is displayed.

Here is my 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>

And my .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

When you click outside, so in the hide() function, don't use toggle , use 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');
}