Question

我有一个带有标准jQuery / suckerfish样式菜单的Drupal站点，我已经修改过这个菜单以使最终的顶级LI通过jQuery具有一些特殊功能。具体来说，在鼠标悬停时，它会显示具有预留功能的选项卡。单击日期输入字段时，将激活jQuery UI 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。

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

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

Answer 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，从而在此处启动悬停事件并隐藏你的菜单。

希望解释得令人满意并有所帮助。

jQuery：需要在mouseout上隐藏两个“显示”元素

1 个答案: