jQuery菜單toggleS滑動懸停？

我有一個菜單，其中只有一個項目有一個子列表。下面是HTML代碼：jQuery菜單toggleS滑動懸停？

<div id="menu"> 
<ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="#">Products</a></li> 
    <li><a href="#">About</a> 
     <ul> 
      <li><a href="#">Example One</a></li> 
      <li><a href="#">Example Two</a></li> 
      <li><a href="#">Example Three</a></li> 
     </ul> 
    </li> 
</ul> 
</div>

我想slideDown菜單，留在，當鼠標在菜單或子菜單上。所以下面的工作很好，但我希望懸停而不是點擊相同的東西。

$('#menu ul li').click(function() { 
    $('#menu ul li ul').slideToggle('slow', function() { 

    }); 
});

我試圖用懸停但它是非常錯誤，這裏是代碼太：

$("#menu ul li").hover(
    function() { 
    $("#menu ul li ul").slideDown('slow'); 
    }, 
    function() { 
    $("#menu ul li ul").slideUp('slow'); 
    } 
);

我試過slideDown後添加.stop(true, true)或$("#menu ul li ul").css("display", "block");但它仍然是馬車。

CSS

#menu ul { 
    list-style: none; 
} 
#menu ul li { 
    display: block; 
    float: left; 
    padding: 0; 
    margin: 0 30px; 
} 
#menu ul li a { 
    color: #8b4513; 
    text-decoration: none; 
    font-size: 16px; 
} 
#menu ul li a:hover { 
    text-decoration: underline; 
} 
#menu ul li a img { 
    position: relative; 
    top: 2px; 
    left: -4px; 
} 
#menu ul li ul { 
    position: absolute; 
    width: 151px; 
    height: 90px; 
    top: 59px; 
    left: 300px; 
    padding: 10px 0 0 0; 
    background: url(gfx/submenu.png) no-repeat; 
    z-index: 1; 
} 
#menu ul li ul li { 
    height: 27px; 
    float: none; 
    margin: 0 25px; 
}

來源

2011-11-22 MatthewK

你的意思就像這個網站上的人正在做他的通訊和音頻菜單項？ http://stackoverflow.com/questions/6539835/jquery-menu-slide-up-from-from-from-bottom-of-screen-on-hover –

嗯，也許，這有點類似。我檢查它。 – MatthewK

@MthetheK請標記答案bro ... – Wazzzy

檢查it out live

HTML

<div id="menu"> 
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Products</a></li> 
    <li><a href="#">About</a> 
     <ul> 
      <li><a href="#">Example One</a></li> 
      <li><a href="#">Example Two</a></li> 
      <li><a href="#">Example Three</a></li> 
     </ul> 
    </li> 
</ul> 
</div>

jQuery的

$("#menu ul li").hover(
    function() { 
    $(this).children("ul").stop(true,true).slideDown('slow'); 
    }, 
    function() { 
    $(this).children("ul").stop(true,true).slideUp('slow'); 
    } 
);

來源

2011-11-22 14:28:15 Wazzzy

我添加了CSS，因爲我認爲這裏有一個bug。我嘗試了你的代碼http://jsfiddle.net/vanJA/8/，但是當鼠標在子菜單上時閃爍！ – MatthewK

@MatthewK嘗試從mouseout（即從.slideUp（'slow'）'）中移除'.stop（true，true）'並將'.stop（true，true）'保留爲'.slideDown（'slow'）「......這就是你需要的......試試看...... – Wazzzy

這真的幫了我。謝謝！ – Ina

懸停是每次觸發在元件鼠標移動。使用進入/離開，而不是：

$("#menu ul li").mouseenter(
    function() { 
    $("#menu ul li ul").slideDown('slow'); 
    } 
); 
$("#menu ul li").mouseleave(
    function() { 
    $("#menu ul li ul").slideUp('slow'); 
    } 
);

來源

2011-11-22 14:24:07 solendil

小提琴演示：http://jsfiddle.net/ZMLyz/

$('#menu ul li').mouseenter(function() { 
    $(this).find('ul').slideDown('slow'); 
}); 

$('#menu ul li').mouseleave(function() { 
    $(this).find('ul').slideUp('slow'); 
});

來源

2011-11-22 14:28:00

jQuery菜單toggleS滑動懸停？

回答

相關問題