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

隐藏其他POPOVERS

您的弹出窗口会在悬停时触发，因此您需要将隐藏功能绑定到鼠标悬停事件上的其他弹出窗口，如下所示：

1）使用ID选择器（^ - 以;所有ID为＆＃39; test＆＃39;关键字的元素开头）：

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

如果您拥有少量弹出窗口，例如：testX（X - 1,2,3 ...）和headerX（X - 1,2,3 ......）并且您希望仅处于活动状态特定组中的一个弹出窗口。

2）使用REL选择器（REL属性等于＆＃34的所有元素; popover＆＃34;）：

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

POPOVERS INITIALIZATION

不要使用 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'}
);

Answer 2

你可以像这样一次设置所有的弹出窗口。一次只有一个活跃。

$('[rel*=popover]').popover({trigger:'hover',animation:'false',placement:'top'});
$('[rel*=popover]').click(function () {
     $('[rel*=popover]').not(this).popover('hide');
});

Answer 3

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

Answer 4

另一种方法是将触发器设置为“手动”并处理单独的onclick / mouseover事件以处理工具提示的显示/隐藏。通过这种方式，您可以更好地控制点击事件。

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

$('[rel*=popover]').click(function () {
    $('[rel*=popover]').popover('hide');
    $(this).popover('show');
});

或

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

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

$('[rel*=popover]').mouseout(function () {
    $('[rel*=popover]').popover('hide');
});

希望它有所帮助!!

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

4 个答案: