jQuery：需要隐藏两个"；“透露”；鼠标上的元素

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

#reservations选项卡div中包含的HTML如下所示：

我没有把它直接放在这篇文章里，因为它相当长

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

在所有情况下，我都可以将其设置为#预订选项卡正常淡入，日期选择器工作，但A.）当UI日期选择器获得焦点时#预订选项卡div消失，或者B.）UI日期选择器出现并按预期工作，但是#预订选项卡不会消失，将鼠标完全移出该区域

---

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

好的，我过去曾使用过一种解决类似问题的方法。基本上，如果你可以这样构造你的HTML：

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

</div>

因此，现在，当您将鼠标悬停在日期选择器上时，鼠标离开功能将被触发，这样您的数据选择器和鼠标悬停在我们的

mainDiv

外部时，它们应该保持可见

当用户离开下拉“区域”时，他们应该输入您的主div，从而在此区域触发悬停事件并隐藏您的菜单

---

希望您的解释令人满意并对您有所帮助。

如果您将

jQuery

替换为

$

，作为一般性讨论，它将使您的代码更容易在“如果可以的话”下重新归档。由于我无法控制的因素，在我的上下文中使用速记选择器失败。不过，为了方便起见，我会编辑这篇文章。很抱歉，如果我告诉你你已经知道了什么，但是一般来说，你的问题是因为你的

日期选择器

不是你悬停的一部分，因此，输入

日期选择器

会触发

mouseleave

事件。也就是说，我想不出一个好的解决方案。是的，几次迭代前它就在同一个外壳中。相同的基本问题，只是不同的变体。我会在等待的时候再看一遍，看看是否有人插话。谢谢你的努力！是的，利亚姆，是的。我不得不再弄点小把戏，但最后还是在主页体上设置了.hover，一切都很好。我可能以前就应该想到这一点，但这是其中一件“几乎奏效”的事情，我被一些小细节所困扰。非常感谢！

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