javascript - 当我单击同一个 div 或 div 外部时，如何隐藏和切换弹出框元素？

Question

如果在包含弹出框的 div 元素外部单击，以及在任何其他包含弹出框的 div 上单击，我将尝试切换弹出框元素。 我浏览了其他没有帮助的帖子，或者我无法弄清楚如何在我的场景中实现。

我的html

<div id="myTableDiv">
  <table id="myTable">
    <tr>
      <td>Product</td>
      <td>Qty</td>
    </tr>
    <tr>
      <td>
        <div class="popUpClass" rel="popover" data-content="" data-reason="returnded reason is factory damage">
          <span style="margin-right:5px">shirt</span>
          <i class="glyphicon glyphicon-exclamation-sign" style="font-size:12px; color:red"></i>
        </div>
      </td>
      <td>5</td>
    </tr>
    <tr>
      <td>
        <div class="popUpClass" rel="popover" data-content="" data-reason="returnded reason is size mis match">
          <span style="margin-right:5px">shoes</span>
          <i class="glyphicon glyphicon-exclamation-sign" style="font-size:12px; color:red"></i>
        </div>
      </td>
      <td>15</td>
    </tr>
  </table>
</div>

$('#myTableDiv').on('click', '.popUpClass', function(e) {
  $(this).popover({
    content: $(this).data('reason'),
    container: 'body'
  })
})

Answer 1

你好，正如纪录片所说的 here你应该添加一个 tabindex 属性，这样你的 <div>将是:

<div tabindex="0" class="popUpClass" rel="popover" data-content="" data-reason="returnded reason is factory damage">
      <span style="margin-right:5px">shirt</span>
      <i class="glyphicon glyphicon-exclamation-sign" style="font-size:12px; color:red"></i>
</div>

在弹出窗口的配置中，您必须添加触发器:

 trigger: 'focus'

我隐藏所有弹出窗口，然后仅显示单击的元素

最后你的代码可能是:

$('#myTableDiv').on('click', '.popUpClass', function(e) {
  $(this).popover({
    trigger: 'focus',
    content: $(this).data('reason'),
    container: 'body'
  })
$('.popUpClass').popover('hide');
$(this).popover('toggle');
})

Here您可以找到完整的示例