jQuery的Twitter的引导弹出提示，只允许1弹出的情况下在同一时间

我有这样的HTML代码：jQuery的Twitter的引导弹出提示，只允许1弹出的情况下在同一时间

<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个弹出窗口而不关闭它们，我怎样才能关闭其他人？

来源

2013-05-08 Viscocent

隐藏其他POPOVERS

你popovers触发悬停，所以你需要绑定隐藏功能，其他popovers上鼠标悬停事件是这样的：

1）用ID选择（^ - 以ID开头的所有元素开始'test'关键字）：

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

这很好，如果你有几组pop3例如：testX（X-1,2,3 ...）和headerX（X-1,2,3 ...），并且你希望只是活动的一个特定组的popover。

2）随着REL选择器（与REL所有元素属性等于 “酥料饼”）：

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

POPOVERS INITIALIZATION

不要使用for循环到初始化popovers 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-08 10:00:42 Landon

需要提供信息！我又学到了另一个窍门！ – Viscocent 2013-05-09 00:34:41

<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-08 09:26:55

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

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

来源

2013-05-08 09:30:10 ZimSystem

另一种方法是触发设置为 '手动' 和处理一个单独的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-07 18:55:14

jQuery的Twitter的引导弹出提示，只允许1弹出的情况下在同一时间

回答

相关问题