我有一個設置爲sticky的線索,當點擊一個鏈接時打開。我還設置了一個關於cluetip的關閉按鈕,所有這些都很好。如果有人在當前關閉按鈕之外點擊了線索之外,我想關閉提示。我正在尋找懸停解決方案,只需點擊線索外的點擊即可。你如何製作一個'粘性'線索,點擊打開,關閉點擊本身之外的點擊?
回答
按照常見問題,有一個API的方法,讓你觸發關閉:
作爲新的clueTip 1.0.3:如何編程關閉(隱藏)一clueTip? 如果要觸發clueTip收的基礎上,其他一些互動,您可以使用下面的代碼:
$(document).trigger('hideCluetip');
所以我認爲你可以做這樣的事情:
$('#myCluetip').cluetip({
onShow: function() {
$(document).one('mousedown',function() {
$(document).trigger('hideCluetip');
})
});
});
這是通過將mousedown事件的一次性事件處理程序綁定到文檔主體,然後觸發Cluetip人員說的事件將隱藏打開的Cluetips。使用一次性事件處理程序意味着每次有人點擊某件事物時,都不會發送hideCluetip觸發器。
這將有助於看到你的代碼,但無論如何,你可以沿着這些線做些事情;
$(document).click(function(e) {
if (!$(e.target).hasClass('cluetip'))
{
// Close the cluetip here.
}
});
Stony的解決方案並不適合我。
我使用@Gary Green的解決方案,它工作正常 - 但這仍然不是我想要的確切的「關閉mouseout/hoverout」解決方案。
最後,我發現Cluetip本身提供了一種方法來做到這一點。
只需設置值「mouseOutClose:假」,像這樣:
$("#myForm :input").cluetip(
{
sticky: true,
closePosition: 'title',
arrows: true,
mouseOutClose: true
}
);
只需添加,您需要爲mouseOutClose添加粘性選項才能工作。 – Purus 2013-10-17 17:09:51
我是這樣做的:
onShow: function() {
// close cluetip when users click outside of it
$(document).click(function(e) {
var isInClueTip = $(e.target).closest('#cluetip');
if (isInClueTip.length === 0) {
$('.cluetip-default').hide();
}
})
},
+1。作品完美。 – Purus 2013-10-17 17:45:06
- 1. Jquery點擊打開關閉菜單並關閉頁面點擊
- 2. 停止從關閉點擊一個下拉開關點擊
- 3. 角上關閉外部點擊 - 關閉也點擊內部
- 4. 點擊打開圖片並點擊關閉它
- 5. 關閉點擊
- 6. 如何打開/關閉選項,當你點擊任何人「格」
- 7. jquery打開和關閉類的點擊
- 8. 上點擊關閉菜單之外
- 9. 當你點擊它之外時,多個模塊不會關閉
- 10. 打開關閉div與點擊
- 11. 事件。點擊()打開和關閉
- 12. 點擊JQuery導航樹打開/關閉
- 13. 關閉後打開點擊事件
- 14. 開關點擊
- 15. 如何關閉外部點擊元素
- 16. 點擊關閉DialogFragment
- 17. QSplashScreen點擊關閉
- 18. 如何在模態點擊之外強制關閉bootbox.alert()?
- 19. 如何關閉上一個打開的子菜單點擊下一個子菜單點擊事件
- 20. 如何打開後點擊下一次點擊模式?
- 21. 當點擊關閉時製作jQuery slideUp
- 22. 如何通過點擊外部的關閉事件來調用點擊函數來關閉展開後的div
- 23. 如何在導航欄下製作粘性CTA,點擊時關閉?
- 24. 關閉通過點擊身體彈出
- 25. 當點擊菜單上,它會打開,當再次點擊關閉
- 26. 點擊傳單地圖關閉模式,點擊標記打開模式
- 27. 如何使一個點擊兩個單擊點擊?
- 28. jQuery的:點擊關閉
- 29. 點擊打開一個箱子,同時關閉其他
- 30. 如何強制彈出關閉,當我點擊打開另一個?
我最終採取使用hideClueTip但綁定的這一概念,並解開了取決於點擊是否在提示中(我決定在點擊提示外點擊時關閉提示),通過onShow和onHide掛鉤捕獲鼠標事件。 – momos 2011-04-15 04:10:45
@mornos好主意! – Richard 2011-04-15 05:17:29
@mornos - 你可以發佈你的解決方案嗎? – leora 2011-10-06 02:07:05