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彈出的情況下在同一時間

回答

相關問題