1

我正在创建一个在悬停时向下滑动的下拉菜单。这是我的一些代码。我想使用 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 i didn't include the HTML code but its a simple image and ul li tags which I know are working fine. There is a display: none; on the ul li and I did some stuff to make it funciton properly in my layout. (i have the layout a bit different than a regular dropdown.) Either way, I'm very certain my CSS is right, I just need to figure out how to write the Jquery. Thanks!

4

1 回答 1

2

[更新答案]

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

<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其作为菜单工作。

于 2010-02-14T04:26:23.483 回答