2

你好，我的开发人员，

我在完善我的 UI 时遇到了一些麻烦。

我制作了一个弹出面板，当我将鼠标悬停在按钮/链接上时会打开。

无论我离开那个按钮/链接还是离开面板本身，这个面板都应该关闭。很直接。

HERE (jsFiddle) 我做了一个简单的演示，效果和预期的一样好。

我的 JS 代码：

$('[data-tip]').tipsy({fade: true, gravity: 's'});

$('#btn').mouseenter(function(e){
  $('#panel').show();
}).mouseleave(function(e){
  var $panel = $('#panel')[0];  
  var $out_el = $(e.relatedTarget)[0];

  if($out_el != $panel){
    $('#panel').hide();
  }
});

$('#panel').mouseleave(function(e){
  var $btn = $('#btn')[0];  
  var $out_el = $(e.relatedTarget)[0];
  var $tipsy = $('.tipsy')[0];

  if($out_el != $btn && $out_el != $tipsy){
    $('#panel').hide();
  }
});

和 HTML 标记

<a href="#" id="btn">BUTTON</a>

<div id="panel">
  <a href="#" title="1" data-tip="test 1">Test anchor 1</a>
  <a href="#" title="2" data-tip="test 2">Test anchor 2</a>
</div>

问题是提示。（确切地说是 jquery Tipsy 插件）。在我提供的示例中，我在弹出的面板中放置了 2 个链接。两者都有醉意。所以在悬停时会显示一个提示。一切安好。

问题是，如果我触摸尖端，面板就会关闭。我不想要那个。所以我对我的 onmouseleave 事件添加了另一个检查...以检查“离开元素”是否醉了...

但问题（我猜）是醉酒在我的活动之前被破坏，所以我无法检查“离开元素”是否醉酒。（对于 $('.tipsy') 我变空了，当然 $('.tipsy')[0] 是未定义的。

请指教！

4

2 回答 2

2

请参阅此演示： http: //jsfiddle.net/hk5ka/8/或包含在 JS 窗格中的相同代码（对于 IE）http://jsfiddle.net/hk5ka/9/

这是鼠标离开的更新条件：

$('#panel').mouseleave(function(e){
  var $btn = $('#btn')[0];  
  var $out_el = $(e.relatedTarget)[0];  

  if($out_el != $btn && (!$(e.toElement).hasClass("tipsy") && $(e.toElement).closest(".tipsy").length == 0)){
    $('#panel').hide();
  }
});
于 2013-01-09T10:49:59.277 回答
2

工作演示

你的 mouseleave 的条件是让它隐藏起来。试试这个。

$('#panel').mouseleave(function(e){
  if (e.target==this) $(this).hide();
});
于 2013-01-09T10:51:04.463 回答