0

標準のjQuery/suckerfishスタイルのメニューを備えたDrupalサイトがあります。これを変更して、最終的なトップレベルのLIにjQueryを介して特別な機能を持たせるようにしました。具体的には、マウスオーバーすると、予約機能のあるタブが表示されます。日付入力フィールドをクリックすると、jQueryUIのdatepickerがアクティブになります。どちらかがフォーカス/ホバー/マウスオーバーである限り、この予約タブとカレンダーをアクティブに保つ必要があります。

＃reservations-tab divに含まれるHTMLはここにあります：http：//pastebin.com/BPp4vS0R

かなり長いので、この投稿には直接入れませんでした。

jQuery：

$(document).ready(function(){  
 // Add div for reservations to display beneath "Stay" link when hovered.
  $('#reservations-tab').hide();
  $('.menulinkstay' || '#reservations-tab').mouseenter(function(){
    $('#reservations-tab').show().fadeTo(400, 1);
  });
  $('.menulinkstay' && '#reservations-tab').mouseleave(function(){
    $('#reservations-tab').stop().fadeTo(400, 0);
  });
  // Datepicker & Datepicker div hide
  $('.datepicker-input .field').datepicker();
  $('#reservations-datepicker-checkin .widget-icon').click(function() {
      $('#reservations-datepicker-checkin .datepicker-input  .field').datepicker('show');
}), $('#reservations-datepicker-checkout .widget-icon').click(function() {
  $('#reservations-datepicker-checkout .datepicker-input .field').datepicker('show');
});
});

&& '#ui-datepicker-div'最初の.mouseleave関数に追加してみました。また、datepicker呼び出しの「show」部分の後にスタンドアロンのコード行として実行する複数のバリエーションを試しました。.hover、.mouseover、および.mouseleaveを使用してみました。

すべてのコンテキストで、＃reservations-tabが適切にフェードインし、datepickerが機能する場所に到達できますが、A。）UI Datepickerがフォーカスを取得すると、＃reservations-tab divが消えます。またはB.）UI Datepickerが表示され、意図したとおりに機能しますが、＃reservations-tabが消えることはなく、マウスを領域の外に完全に移動します。

どんな/すべての助けにも前もって感謝します。

4

1 に答える 1

0

OK、私が過去に同様の問題に使用した1つの解決策。基本的に、HTMLを次のように構造化できる場合：

<div id="reservations-widget">
 <!--widget code-->
</div>
<div class="mainDiv">

</div>

次に、jQueryを次のように構成できます。

$(document).ready(function(){  
 // Add div for reservations to display beneath "Stay" link when hovered.
  $('#reservations-tab').hide();
  $('.menulinkstay' || '#reservations-tab').mouseenter(function(){
    $('#reservations-tab').show().fadeTo(400, 1);
  });
  $('div.mainDiv').hover(function(){
    $('#reservations-tab').stop().fadeTo(400, 0);
  });
  // Datepicker & Datepicker div hide
  $('.datepicker-input .field').datepicker();
  $('#reservations-datepicker-checkin .widget-icon').click(function() {
      $('#reservations-datepicker-checkin .datepicker-input  .field').datepicker('show');
}), $('#reservations-datepicker-checkout .widget-icon').click(function() {
  $('#reservations-datepicker-checkout .datepicker-input .field').datepicker('show');
});
});

そのため、日付ピッカーにカーソルを合わせると、マウスの離脱機能が起動され、データピッカーとカーソルの両方が表示されmainDivたままになります。

ユーザーがドロップダウンの「エリア」を離れると、メインのdivに入る必要があります。これにより、これでホバーイベントが発生し、メニューが非表示になります。

それが満足のいく説明であり、役立つことを願っています。

于 2012-10-18T14:27:37.083 に答える