当我单击同一div或在div之外时，如何隐藏和切换popover元素？

Question

我正在尝试切换popover元素，如果在包含该popover的div元素之外单击它，并且在包含popover的任何其他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

您好，正如文件记录所说，您应该在此处添加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');
})

在这里您可以找到完整的示例