[英]In jquery, when i click close link and outside the div my toggle class not getting hide
[英]How do i hide and toggle popover element when i click on the same div or outside of the div?
我正在嘗試切換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' }) })
您好,正如文件記錄所說,您應該在此處添加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');
})
在這里您可以找到完整的示例
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.