HTML

Question

我正在创建一个在悬停时向下滑动的下拉列表。这是我的一些代码。我想使用HoverIntent来实现这个目标。

.menu_img是图像上的一个类，用于开始向下滑动列表

.page_nav是列表中的类，当.menu_img悬停时，它会向下滑动。

$(document).ready(function(){
  $('img.menu_img').click(function () {
   $('ul.page_nav').stop().slideDown('slow');
  });
});

HTML

<div id="helper_bar">
    <div class="page_width">
        <img src="images/page_nav.png" alt="page_nav" title="use this to navigate the page" class="menu_img" width="179" height="33" />
    </div>
</div>

<div class="page_width">
    <ul class="page_nav">
            <li><a href="#">About</a></li>
            <li><a href="#">Services Offered</a></li>
            <li><a href="#">The Team</a></li>
            <li><a href="#">The Process</a></li>
    </ul>
</div>

这是我的代码。如果你单击img但是如果你切换.click到.hover，当你试图转到li时，它会徘徊。这就是我引入hoverIntent插件的原因，但我不确定如何集成它以获得我正在尝试创建的正确解决方案。

BTW我没有包含HTML代码，但它是一个简单的图像和ul li标签，我知道它们正常工作。有一个显示：无;在ul li上，我做了一些东西，使它在我的布局中正确运行。（我的布局与常规下拉有点不同。）无论哪种方式，我都非常确定我的CSS是对的，我只需要弄清楚如何编写Jquery。谢谢！

Answer 1

[更新后的答案]

你想做的事情是悬停效果会有点挑战。这是一个可能的解决方案，但您无法使用hoverIntent，因为它需要事件起泡，mouseenter和mouseleave事件不会冒泡。但是，我在此解决方案中加入了类似hoverIntent的效果。首先将两个项目包装在id为menu的单个div中：

<div id="menu">
    <div id="helper_bar"> ... </div>
    <div class="page_width"> ... </div>
</div>

并使用此JS（在document.ready事件中）：

var trigger = $("img.menu_img")[0], // The DOM element
    $nav    = $("ul.page_nav");     // The jQuery Wrapped DOM element
$("#menu").mouseover(function(e){
   // Keep track when the mouse is over the menu area
   if(e.target == this){
     $(this).data('over', true);
   }      

   // Only show menu if the img.menu_img was what triggered the event
   if(e.target == trigger){
     $nav.stop().slideDown('slow');
   }
}).mouseout(function(e){
   if( e.target == this ){
       var $this = $(this);
       $this.data('over', false);
       window.setTimeout(function(){
          if(!$this.data('over')) $nav.stop().slideUp('slow');
       }, 500); // Wait half a second to see if the mouse reenters the element
   }
});

请询问您是否对此解决方案有疑问或问题。

[原始答案]

hover永远无法满足您的需求，因为ul列表永远不会是img的孩子。每次离开img时，菜单都会隐藏。我建议的是这样的（实际上，我建议你使用图像替换而不是图像，但是一次只做一件事）：

<强> HTML

<ul id="nav">
  <li><img class="menu_img" alt="Home" />
      <ul class="page_nav">
         ...
      </ul>
  </li>
  ....
</ul>

<强> JS

$("#nav > li").hoverIntent( function(){
    $('ul.page_nav', this).stop().slideDown('slow');
}, function(){
    $('ul.page_nav', this).slideUp('slow');
});

这样mouseenter事件（或带有hoverIntent的延迟版本）会在li悬停时触发，并且在鼠标退出整个列表之前不会再次触发。因此，只要鼠标位于li或其任何子级上方，mouseout事件就永远不会触发，允许page_nav作为菜单执行其工作。

使用hoverIntent进行JQUERY悬停下拉列表

HTML

1 个答案: