jQuery下拉hover菜单
我是jQuery的新手，我希望你们能帮助我。 我正在尝试制作hover下拉菜单，但它非常错误。 你能帮我清理一下我的Javascript吗？ 请看我的代码。
http://jsdo.it/mretchin/4Ewk
它无论出于何种原因都不适用于jsdo.it，但它适用于Komodo Edit。
如果你真的想自己试试代码，问题主要是Javascript。 你可以帮助我做到这一点，当用户将鼠标hover在img.menu_class上时，ul.file_menu会下降，然后，如果我想，我可以将鼠标hover在ul中的#something上，它会在水平上而不是在垂直方向上掉落。
谢谢你的帮助！ 我很感激！
我应该放弃并让它在CSS中运行吗？
你可以这样做：
$(document).ready(function() { $(".hoverli").hover( function() { $('ul.file_menu').stop(true, true).slideDown('medium'); }, function() { $('ul.file_menu').stop(true, true).slideUp('medium'); } }); }); 这里有子菜单的例子：
$(document).ready(function() { $(".hoverli").hover( function() { $('ul.file_menu').slideDown('medium'); }, function() { $('ul.file_menu').slideUp('medium'); } ); $(".file_menu li").hover( function() { $(this).children("ul").slideDown('medium'); }, function() { $(this).children("ul").slideUp('medium'); } ); });
对于任何在将来发现这一点的人来说，可以使用.slideToggle()缩短Aram的答案来处理上下。
这是修改过的小提琴
http://jsfiddle.net/4jxph/2009/
如果你有一个子菜单设置为display: none; 它也会触发它，所以你要做的是将它设置为block ，然后添加这样的东西
var subMenu = $('li.hoverli > ul > li'); subMenu.hover(function () { $(this).find("ul").slideToggle(200); });
并将其放在第一个slideToggle下方。 我为什么不给你看？
$(document).ready(function () { $(".hoverli").hover(function () { $(this).find('ul').slideToggle('medium'); }); var subMenu = $('li.hoverli > ul > li'); subMenu.hover(function () { $(this).find("ul").slideToggle(200); }); });
不确定你是否在乎，但你想确保你运行.stop（）方法，动画不会自行构建并反复运行。 这是一个例子
http://jsfiddle.net/4jxph/1335/
$(document).ready(function () { $(".hoverli").hover( function () { $('ul.file_menu').stop(true, true).slideDown('medium'); }, function () { $('ul.file_menu').stop(true,true).slideUp('medium'); } ); });
使用jQuery中的finish函数来防止将鼠标快速hover在菜单上并离开菜单的错误。 完成比先前建议的停止function更好。
$(document).ready( function () { $(".hoverli").hover( function () { $('ul.file_menu').finish().slideDown('medium'); }, function () { $('ul.file_menu').finish().slideUp('medium'); } ); });
Aram Mkrtchyan的答案几乎就在我身边。 他的问题是，如果你在菜单下面添加任何内容，那么它就会变得棘手。 这是我的意思的一个例子，我在他的菜单下面添加了一个div： http ： //jsfiddle.net/4jxph/3418/
我使用div而不是列表和列表项（我发现它更容易使用，并且更灵活）和jQuery版本1.9.1提交此更新的答案
这里是jFiddle的链接： http ： //jsfiddle.net/4jxph/3423/
这是代码：
————— HTML：
Actions testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu
————— Css：
.lbtn { display:inline-block; cursor:pointer; height:20px; background-color:silver; background-repeat:repeat-x; border:1px solid black; /* dark navy blue */ text-decoration:none; font-size:11pt; text-align:center; line-height:20px; padding:0px 10px 0px 10px; } .divMenuWrapper1 { height: 25px; width: 75px; } .file_menu { display:none; width:250px; border: 1px solid #1c1c1c; background-color: white; position:relative; z-index:100000; } .file_menu div { background-color: white; font-size:10pt; } .file_menu div a { color:gray; text-decoration:none; padding:3px; padding-left:15px; display:block; } .file_menu div a:hover { padding:3px; padding-left:15px; text-decoration:underline; color: black; }
————— jQuery（放在document.ready或pageLoad（）中）：
$("#hoverli").hover( function () { $('#actions_menu').finish().slideDown('fast'); }, function () { $('#actions_menu').finish().slideUp('fast'); } );
我知道这可能有点晚了但只是发现这个post看到你上面关于菜单“变得有点搞砸”的问题没有答案。
如果你给div你的类’文件菜单’一个绝对的位置那么它应该停止影响它前面的任何元素，因为你将它从正常流程中取出。
要在hover到其内容所需的确切高度时打开选择框，请确定有多少元素：
JavaScript的
function DropList(idval) { // // fully opens a dropdown window for a select box on hover // var numOptgroups = document.getElementById(idval).getElementsByTagName('optgroup').length; var numOptions = document.getElementById(idval).getElementsByTagName('option').length; document.getElementById(idval).size = numOptgroups + numOptions; }
HTML