当用户再次点击时如何隐藏移动设备上的项目？

Question

我有这个样本

.container-btn-tooltip:hover .tooltip-content {

  display: block;

}

.tooltip-content {

  background: black;

  color: white;

  display: none;

  max-width: 360px;

  min-width: 210px;

  padding: 5px 10px;

  z-index: 100;

  text-align: center;

  color: #00;

  margin-top: 8px;

}

<div class="container-btn-tooltip">

  <button class="open">Open Tooltip</button>

  <div class="tooltip">

    <div class="tooltip-content">

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>

    </div>

  </div>

在移动设备上，hover实际上是在项目上点击。

我想在用户第二次单击按钮时隐藏该项目（仅在移动设备上）

目前一切顺利，该项目可以隐藏，如果用户点击外面。

以下事情确实必须发生

1. 如果是第一次点击，则该项目获得display: block并且是displayed

2. 如果是第二次点击，则该项目获得display: none并且是hidden

3. 如果您单击任何其他区域，该项目将保留 hidden