带子菜单悬停的jquery菜单 [英] Jquery menu with sub menu hover

问题描述

我有一个自我解释的菜单和子菜单系统，您将鼠标悬停在主菜单选项中的某个位置，然后显示一个选项子菜单。

如果您悬停查看主菜单选项，但在没有从子菜单中选择时将鼠标移开，则子菜单不会向上滑动。

你可以在这里看到它的工作原理（我知道css很臃肿，但我只是复制了整个表格：

http://jsfiddle.net/6sres/

这是我正在使用的jquery：

$ $ $ $（'＃nav li'）。hover（

function（）{
//显示子菜单
$（'ul'，this）.stop（）。slideDown（100）;
}，

function（）{
//隐藏它的子菜单
$（'ul'，this）.stop（）。slideUp（10）;
}



$（'a＃leagueSelect'）。hover（function（）{

$（'ul.fixture-list'）。slideDown（50） ;

}）;

我知道这很简单，到这这是造成一些问题。

谢谢，

Alan。

解决方案

您没有任何处理e当 a＃leagueSelect 不再徘徊的时候发泄。

jsFiddle Demo

  $（'a＃leagueSelect'）。hover（function（）{
 $（'ul.fixture-list'）。slideDown（50）; 
}，
 function（）{
 $（'ul.fixture-list'）。slideUp（50）; 
}）; 
  

I have a menu and sub-menu system which is self explanatory, you hover over something in the main menu options and then you are presented with a sub menu of options.

There is a problem if you hover to see the main menu options, but then mouse away without selecting from the sub menu, the sub-menu doesn't slide up.

You can see it working here (I know the css is bloated but I have just copied the entire sheet in:

http://jsfiddle.net/6sres/

This is the Jquery I am using:

$('#nav li').hover(

     function () {
          //show its submenu
          $('ul', this).stop().slideDown(100);
     }, 

     function () {
          //hide its submenu
      $('ul', this).stop().slideUp(10);
     }

);

$('a#leagueSelect').hover(function(){

     $('ul.fixture-list').slideDown(50);        

});

I know it is something simple, perhaps related to the "this" which is causing some issues.

Thanks,

Alan.

解决方案

You didn't make any function that handles the event when a#leagueSelect is not hovered anymore.

jsFiddle Demo

$('a#leagueSelect').hover(function(){
     $('ul.fixture-list').slideDown(50);        
},
function(){
     $('ul.fixture-list').slideUp(50);          
});

这篇关于带子菜单悬停的jquery菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！