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

Jquery Twitter Bootstrap popup tooltip, allow only 1 instance of popup at a time

本文关键字：一次 实例 许一个 Bootstrap Twitter 工具提示 Jquery      更新时间：2023-09-26

我有这样的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个弹出窗口而不关闭它们，我如何关闭其他弹出窗口?

隐藏其他弹出窗口

你的弹出窗口触发悬停，所以你需要绑定隐藏函数到其他弹出窗口在鼠标悬停事件，像这样:

1) With ID selector(^ -以;所有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');
});
<<p> 弹窗初始化/strong>

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

1) ID选择器

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

2) REL选择器

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

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

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

<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>

另一种方法是将trigger设置为'manual'，并处理一个单独的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');
});

希望有帮助!!

相关文章：