0

我有一个带有标准 jQuery/suckerfish 样式菜单的 Drupal 站点，我对其进行了修改以使最终的顶级 LI 通过 jQuery 具有一些特殊功能。具体来说，在鼠标悬停时，它会显示一个具有预订功能的选项卡。单击日期输入字段时，jQuery UI 日期选择器将激活。我需要此预订选项卡和日历以保持活动状态，只要它们处于焦点/悬停/鼠标悬停状态。

#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 调用的“显示”部分之后，我还尝试了多种变体，将其作为独立的代码行。我尝试过使用 .hover、.mouseover 和 .mouseleave。

在所有情况下，我都可以将其移至#reservations-tab 正确淡入的位置，并且 datepicker 可以工作，但是 A.）当 UI Datepicker 获得焦点时，#reservations-tab div 消失，或者 B.）UI Datepicker 出现并按预期工作，但#reservations-tab 不会消失，将鼠标完全移出该区域。

非常感谢您的任何/所有帮助。

4

1 回答 1

0

OK one solution I've used for similar problems in the past. Basically If you can structure your HTML like so:

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

</div>

then you can structure your jQuery like:

$(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');
});
});

So now rather then the mouse leave function being fired whenever you hover over the datepicker, providing both your datapicker and hover overs our outside of mainDiv they should stay visible.

When the user leaves the drop down "area" they should enter your main div, thus firing the hover event on this and hiding your menus.

Hope that's explained satisfactory and helps.

于 2012-10-18T14:27:37.083 回答