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。