Skip to main content
 首页 » 编程设计

jquery之对话气泡的两次单击事件

2026年07月28日5bhlsheji

我对 jQuery 和点击功能有疑问。我想从“http://gdakram.github.com/JQuery-Tooltip-Plugin”编辑一个语音气泡插件。在这里您可以看到,如果将鼠标悬停在按钮上,则会打开一个对话框。我想要通过点击来实现此功能,而不是通过鼠标悬停。 我的问题是,这个脚本对我来说太复杂了……这是网站的一部分(js-data):

(function($) { 
 
$.fn.tooltip = function(settings) { 
// Configuration setup 
config = {  
'dialog_content_selector' : 'div.tooltip_description', 
'animation_distance' : 50, 
'opacity' : 0.85,*/ 
'arrow_left_offset' : 70, 
'arrow_top_offset' : 50, 
'arrow_height' : 20, 
'arrow_width' : 20, 
'animation_duration_ms' : 300, 
**'event_in':'click',**  
'hover_delay' : 0, 
**'event_out': 'click',**  
};  

事件输入和事件输出不能一起工作......有什么想法,我能做什么?

请您参考如下方法:

这很粗糙,但应该可行 - 构建您自己的“切换”之类的方法:

 config = {  
       'dialog_content_selector' : 'div.tooltip_description', 
       'animation_distance' : 50, 
       'opacity' : 0.85, 
       'arrow_left_offset' : 70, 
       'arrow_top_offset' : 50, 
       'arrow_height' : 20, 
       'arrow_width' : 20, 
       'animation_duration_ms' : 300, 
       '_event_' : 'click'  
 
      //'event_in':'mouseover', 
      //'event_out':'mouseout', 
      //'hover_delay' : 0 
    };  
 
   if (settings) $.extend(config, settings); 
 
 /** 
  * Apply interaction to all the matching elements 
  **/ 
 
 this.each(function() { 
 
     toggleTip(this);    
 
 }); 
 
 /** 
  * Positions the dialog box based on the target 
  * element's location 
  **/ 
 
 function toggleTip(tip) {   
 
    var count = 1; 
 
    $(tip).bind(config._event_, function(e){ 
 
        e.stopPropagation(); 
 
        _hide(tip); 
 
            count++ % 2 ? _show(tip) : _hide(tip); 
 
     }); 
 
   }; 

为了使其真正有效,您需要重新考虑 _show() 和 _hide() 函数。