javascript - 如何在用户第二次点击时隐藏移动设备上的元素？

Question

我有这个样本

link

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

在移动设备上，悬停实际上是在元素上点击。

我想在用户第二次点击按钮时隐藏该元素( 仅在移动设备上)

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

下面的事情真的要发生

1. 如果是第一次点击，该元素将获得 display: block 并显示

2. 如果是第二次点击，该元素将得到 display: none 并且 hidden

3. 如果您单击任何其他区域，该元素将保持隐藏状态

Answer 1

使用 javascript 和 jquery 的可能解决方案:

$(document).on('click', 'button.open', function() {
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        $(this).removeClass('open').addClass('close').html('Close Tooltip');
        $('.tooltip-content').show();
    };
});
$(document).on('click', 'button.close', function() {
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        $(this).removeClass('close').addClass('open').html('Open Tooltip');
        $('.tooltip-content').hide();
    };
});