jQuery下拉 - 悬停其他类？

这是我的一个简单的下拉菜单的jquery菜单。不过，我遇到了麻烦。我希望当用户将鼠标悬停在.mainMenuDiv上时，它们可以向下滑动，以便在鼠标悬停在.SubMenu div上时也能保持滑动！jQuery下拉 - 悬停其他类？

帮助！ :)

$(function() { 
      var tabContainers = $('div.subMenu > div'); 
      tabContainers.hide(); 

      $('.mainMenuDiv a').hover(
      function() { 
       tabContainers.filter(this.hash).stop(true, true).slideDown(); 
      }, 
      function(){ 
       tabContainers.filter(this.hash).stop(true, true).slideUp(); 
      }); 
    }); 


<div class="mainMenu" align="center"> 
    <table cellpadding="0" cellspacing="0" border="0" width="950"> 
     <tr> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/new/#new" class="mainMenuLink" id="1">I'm New</a></td> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/ministries/#ministries" class="mainMenuLink">Ministries</a></div></td> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/beliefs/#beliefs" class="mainMenuLink">Beliefs+Mission</a></div></td> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/listen/#listen" class="mainMenuLink">Listen</a></div></td> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/connect/#contact" class="mainMenuLink">Connect</a></div></td> 
      <td width="100%"></td> 
     </tr> 
    </table> 
</div> 
    <div class="subMenu"> 
     <div id="new"> 
      <h2>I'm New</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div>

我知道HTML是不是很大......但是这是我有工作...

来源

2009-09-29 Kevin Brown

你可以发布HTML吗？ – 2009-09-29 13:16:44

如果我理解正确的话，我想你会需要使用只是mouseover事件，而不是hover，如：

$(function() { 
     var tabContainers = $('div.subMenu > div'); 
     tabContainers.hide(); 

     $('.mainMenuDiv a').mouseover(function() { 

      //hide all the containers 
      tabContainers.slideUp(); 

      //slide this one down 
      tabContainers.filter(this.hash).stop(true, true).slideDown(); 
     }); 

     //slide up the container when the mouse is over anything else 
     $('body :not("div.subMenu > div, .mainMenu a")').mouseover(function() { 
      tabContainers.slideUp(); 
     }); 
});

现在，“当前”人会一直开到鼠标点击另一个链接。

来源

2009-09-29 13:22:28 karim79

这几乎是完美的。除了链接或.subMenu之外的其他内容，我该如何让它们关闭？（本质上是一个鼠标？） – 2009-09-29 21:30:08

@凯文布朗 - 请参阅我的编辑，应该这样做。或者，您可以在第二个mouseover的选择器中使用'html'而不是'body'。希望解决它。 – karim79 2009-09-30 12:52:47

几乎在那里！除非将鼠标从菜单快速移动到子菜单，否则子菜单不会停留。可能考虑到这些表格：（... 短暂的超时函数是否可以解决这个问题呢？或者可能是hoverIntent插件？我的客户希望我保留表格，所以我必须做到这一点。 – 2009-09-30 18:30:37

我不知道如果我理解正确的话，但你可以链选择器一起使用一个简单的逗号。

因此，也许这将工作

$('.mainMenuDiv a, div.subMenu > div').hover(

如果我想的东西也请发表您的HTML代码。

来源

2009-09-29 13:16:25 32423hjh32423

jQuery下拉 - 悬停其他类？

回答

相关问题