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のほろ酔いプラグイン）。私が提供した例では、ポップアップ パネル内に 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

ワーキングデモ

あなたのマウスリーブの状態はそれを隠しています。代わりにこれを試してください。

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