javascript - Jquery Twitter Bootstrap 弹出工具提示，一次只允许 1 个弹出实例

Question

我有这个 HTML 代码:

<table class="bag"> 
    <tr>
        <td id='slot0' item-type="" item-id="">
            <a href="#" id="tool1" rel="popover" data-content="cont" data-original-title="ti-ta" data-animation="false">
                <div class="bag-trigger"><tag style="z-index:10" id='tag0' class="hidden"></tag></div>
            </a>
        </td>

        <td id='slot1' item-type="" item-id="">
            <a href="#" id="tool2" rel="popover" data-content="cont" data-original-title="ti-ta">
                <div class="bag-trigger">
                    <tag id='tag1' class="hidden"></tag>
                </div>
            </a>
        </td> 
        <td id='slot2' item-type="" item-id="">
            <a href="#" id="tool3" rel="popover" data-content="cont" data-original-title="ti-ta">
                <div class="bag-trigger"><tag id='tag2' class="hidden"></tag></div>
            </a>
        </td> 
        <td id='slot3' item-type="" item-id="">
            <a href="#" id="tool4" rel="popover" data-content="cont" data-original-title="ti-ta">
                <div class="bag-trigger"><tag id='tag3' class="hidden"></tag></div>
            </a>
        </td>
    </tr>
</table>

这是我的 jQuery 代码:

<script>  
$(function () {
    for (var i = 1; i <= 16; i++) {
        $("#tool"+i).popover({animation:'false'});
        $("#tool"+i).popover({placement:'top'});  
        $("#tool"+i).popover({trigger: 'hover'});  
     }; 
});  
</script> 

我的问题是我可以在不想要的时间同时打开弹出窗口。如果我一次单击 2 个弹出窗口而不关闭它们，如何关闭其他的？

Answer 1

隐藏其他弹出窗口

您的弹出窗口在悬停时触发，因此您需要在 mouseover 事件上将隐藏功能绑定(bind)到其他弹出窗口，如下所示:

1) 使用 ID 选择器(^ - 开头；ID 以“test”关键字开头的所有元素):

$("[id^='test']").mouseover(function () {
    $("[id^='test']").not(this).popover('hide');
});

如果你有几组弹出窗口，这很好，例如:testX (X - 1, 2, 3 ...) 和 headerX (X - 1, 2, 3 ...) 并且你只想激活特定组中的一个弹出窗口。

2) 使用 REL 选择器(所有具有 REL 属性的元素等于“popover”):

$("[rel='popover']").mouseover(function () {
    $("[rel='popover']").not(this).popover('hide');
});

POPOVER 初始化

不要使用 for 循环 来初始化 html 元素上的弹出窗口。像这样使用 JQuery 选择器:

1) ID 选择器

$("[id^='test']").popover(
    {trigger:'hover',animation:'false',placement:'top'}
);

2) REL 选择器

$("[rel='popover']").popover(
    {trigger:'hover',animation:'false',placement:'top'}
);