jquery中的下拉菜单

Question

你好朋友我设计了一个下拉菜单，使用jQuery中的mouseeneter(）和mouseout()。问题是当我从主菜单中选择mouseout()时，下拉链接向上滑动。我不知道如何设置条件，请帮忙。 我的代码是

jQuery的

<script> 
$(document).ready(function(){ 
    //alert('hi'); 
    $('#link-detail').css('display','none'); 
    $('#hover-detail').mouseenter(function(){ 
     $('#link-detail').css({position:'absolute',top:'20px',left:'0px',zindex:'99999'}); 
     $('#link-detail').slideDown(); 
     }); 
     $('#hover-detail').mouseout(function(){ 
     $('#link-detail').slideUp(); 
     }); 

    }) 
</script> 

HTML

<div class="link-detail-wrap"><div id="hover-detail">hover me</div> 
<div> 
    <ul id="link-detail"> 
    <li><a href="#">link 1</a></li> 
    <li><a href="#">link 1</a></li> 
    <li><a href="#">link 1</a></li> 
    <li><a href="#">link 1</a></li> 
    <li><a href="#">link 1</a></li> 
    </ul> 
</div></div> 
<div>hihihih</div> 

CSS

.link-detail-wrap 
{ 
    float:left; 
    width:100%; 
    position:relative; 
    } 

ul#link-detail 
{ 
    margin:0; 
    padding:0; 
    border:solid 1px #666; 
    border-bottom:none; 

    } 
ul#link-detail li 
{ 
    list-style:none; 
    margin:0; 
    padding:0; 
    display:inline; 

    } 
ul#link-detail li a 
{ 
    text-decoration:none; 
    color:#333; 
    padding:2px 50px 2px 10px; 
    background:#F0F0F0; 
    border-bottom:1px solid #666; 
    /*line-height:25px;*/ 
    font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; 
    text-transform:capitalize; 
    display:block; 
    } 
ul#link-detail li a:hover 
{ 
    background:#CCC; 
    } 

你也可以看到它在http://jsfiddle.net/36CXK/

PL EASE HELP

在此先感谢

Answer 1

使用这个脚本在脚本区域

<script type="text/javascript"> 
$(document).ready(function(){ 
     //alert('hi'); 
     $('#link-detail').css('display','none'); 


      $("#hover-detail").hover(
    function() { 
    $('#link-detail').css({position:'absolute',top:'20px',left:'0px',zindex:'99999'}); 
      $('#link-detail').slideDown(); 
    }, 
    function() { 
    // do nothing 
    } 
); 

$(".relation").hover(
    function() { 
    // do nothing 
    }, 
    function() { 
    $('#link-detail').slideUp(); 
    } 
); 
}) 
</script> 

和额外的CSS类创建它使用的是超时具有一定的延迟上向上滑动菜单做

.relation { 
    position:relative; 
    top:-20px; 
} 

Answer 2

只是注释掉$('#link-detail').slideUp();线。

在这里看到：

http://jsfiddle.net/36CXK/1/

Answer 3

为什么不使用已有的jQuery的一个下拉列表插件：

• http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
• http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/
• http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/
• http://www.adamcoulombe.info/lab/jquery/select-box/
• http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements

他们很容易的风格和所有的功能已经实现。所有你需要做的就是根据你的喜好来设计风格。

Answer 4

的一种方式老鼠离开。每次您将鼠标悬停在菜单上时都可以清除此超时，以防止动画发生。

我创建一个对象Dropdown控制超时：

var Dropdown = { 
    timer: 0, 
    hide: function(callback, delay){ 
     this.timer = setTimeout(function() { 
      return callback.call(this, arguments); 
     }, delay); 
    }, 
    reset: function(){ 
     this.timer && clearTimeout(this.timer); 
    } 
}; 

而且你可以重构你的代码，使这使用：

$('#link-detail').css('display', 'none'); 

$('#hover-detail').hover(function() { 
    Dropdown.reset(); 
    $('#link-detail').css({ 
     position: 'absolute', 
     top: '20px', 
     left: '0px', 
     zindex: '99999' 
    }); 
    $('#link-detail').slideDown(); 
}, function() { 
    Dropdown.hide(function(){ 
     $('#link-detail').slideUp(); 
    }, 200); 
}); 

$('#link-detail').hover(function() { 
    Dropdown.reset(); 
}, function(){ 
    Dropdown.hide(function(){ 
     $('#link-detail').slideUp(); 
    }, 200); 
}); 

这是a working fiddle。