2

我有这个 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 个弹出窗口而不关闭它们，我该如何关闭它们？

4

4 回答 4

3

隐藏其他弹窗

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

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');
});

弹出框初始化

不要使用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'}
);
于 2013-05-08T10:00:42.490 回答
2

您可以像这样一次设置所有弹出框。一次只有一个处于活动状态。

$('[rel*=popover]').popover({trigger:'hover',animation:'false',placement:'top'});
$('[rel*=popover]').click(function () {
     $('[rel*=popover]').not(this).popover('hide');
});
于 2013-05-08T09:30:10.583 回答
0 
<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>
于 2013-05-08T09:26:55.087 回答
0

另一种方法是将触发器设置为“手动”并处理单独的 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');
});

希望能帮助到你！！

于 2015-03-07T18:55:14.813 回答